What is glassmorphism in CSS?

Glassmorphism is a design style that mimics frosted glass — a translucent layer with a strong blur of whatever sits behind it, plus a subtle border highlight. The CSS recipe is short: a semi-transparent background, backdrop-filter: blur() for the frosting, and a thin light border. It became mainstream around 2020–2021 (Apple's Big Sur was the canonical reference) and has since become a staple for cards, modals, and floating navigation bars.

Does backdrop-filter work in every browser?

In 2026, backdrop-filter has full support in Chromium (Chrome, Edge, Brave, Opera, Samsung Internet), Firefox (since 103, July 2022), and Safari — Safari requires the -webkit- prefix, which the tool emits automatically. The remaining caveat is some older Android WebViews. If you must support those, gate the effect behind @supports (backdrop-filter: blur(1px)) and provide a solid-color fallback.

Why does my glass effect look gray and lifeless?

Three things kill glassmorphism: a boring solid background behind the panel (frosted glass needs something colorful to refract), too-low blur (under 8px reads as 'cloudy' rather than 'glass'), and missing saturation. Using saturate(180%) inside backdrop-filter pumps up the colors that bleed through, which is what gives premium glass UIs their depth. Try the four background presets in this tool — the same panel can look terrible on dark gray and gorgeous on a vivid gradient.

Is glassmorphism accessible?

It can be — but it's the design language most likely to fail WCAG contrast checks. Always test text-on-glass with a contrast tool (use a screenshot of the rendered panel as the background sample). Add a darker scrim layer (rgba(0,0,0,0.3)) under the glass if your background is photographic. Provide a prefers-reduced-transparency fallback that swaps the translucent panel for a solid one. Don't use glass for body copy at small sizes — keep it for chrome and key calls-to-action.

What's the performance cost of backdrop-filter?

backdrop-filter is GPU-accelerated, but it forces the browser to composite a separate layer for whatever sits behind the element, which means more memory and a longer paint. On a desktop or modern phone, one or two glass panels per screen are imperceptible. Stacking ten of them on a scroll-heavy page (especially over a video background) can drop a low-end Android phone to 30 fps. Profile in DevTools' Performance panel if you're seeing jank, and consider will-change: backdrop-filter sparingly.

Generador de glassmorphism CSS

Crea paneles UI tipo vidrio esmerilado con vista previa en vivo sobre cuatro fondos. Genera CSS compatible entre navegadores con el truco de saturate() que hace que el vidrio luzca premium.

Fondo de prueba

Color del tinte

Opacidad del tinte: 0.18

blur (desenfoque): 16px

saturation (saturación): 180%

Borde (color · opacidad)

0.25

Radio de las esquinas: 20px

Añadir sombra suave

Vista previa

Panel de vidrio

Pon esta tarjeta sobre cualquier fondo colorido y el vidrio refractará todo lo que esté detrás.

CSS

.glass {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
}

El glassmorphism necesita tres cosas: un tinte de fondo translúcido, un backdrop-filter con buen desenfoque y un sutil reflejo en el borde. Combina todo eso sobre una base colorida (degradado, foto o formas geométricas) para conseguir el efecto vidrio esmerilado premium que popularizó Big Sur de Apple.

Cómo usar

Crea paneles UI tipo vidrio esmerilado con vista previa en vivo sobre cuatro fondos. Genera CSS compatible entre navegadores con el truco de saturate() que hace que el vidrio luzca premium.

1Pick a background preset (gradient, photo, dark, geometric) — glassmorphism only looks good against something colorful, so test against more than one.
2Set the tint color and opacity. Most premium glass uses #ffffff at 0.10–0.25 opacity; a black tint at 0.20–0.40 reads as 'dark glass.'
3Adjust blur (12–20px is the sweet spot) and saturation (180% is the Apple default — anything below 130% looks washed out).
4Tune the border. A 1px white border at 0.20–0.30 opacity adds the highlight that makes glass look 3D.
5Toggle the soft drop shadow on if the panel needs to lift off the background. Then click Copy and paste the CSS into your stylesheet.

Características

Live preview against four different backgrounds — gradient, photo, dark, and geometric — so you see how the glass refracts in context
Independent control over tint color, opacity, blur, saturation, border color/opacity, corner radius, and shadow
Outputs both standard backdrop-filter and -webkit-backdrop-filter for full Safari + Chromium + Firefox support
Auto-includes the saturate(180%) trick that gives premium glass UIs their colorful depth
Pure client-side — no server, no signup, copy-paste-ready CSS

Preguntas frecuentes

Más información

CSS Glassmorphism in 2026 — A Practical Guide to Frosted-Glass UI That Actually Looks Good