What is glassmorphism?

A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).

Why does it look like nothing in my project?

Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.

How is this different from a regular semi-transparent background?

`background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.

Is backdrop-filter supported everywhere?

Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.

Why is it bad for performance?

`backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.

Generador de glassmorphism

Vidrio esmerilado en CSS con vista previa en vivo - ajusta color de fondo, backdrop blur, borde y sombra sobre un fondo cargado.

Funciona en tu navegador

Glassmorphism = fondo translúcido + backdrop blur fuerte + borde fino + sombra suave. La vista previa pone tu tarjeta sobre un fondo cargado para que el blur se vea (el efecto es invisible sobre un fondo plano - necesita algo detrás). Los cuatro ingredientes tienen sliders; la vista previa se actualiza en vivo y el bloque CSS está listo para copiar.

Fondo

Color de fondo

Opacidad fondo20%

Color de borde

Opacidad borde35%

Backdrop blur16px

Border radius16px

Desenfoque sombra32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Vista previa

Vidrio esmerilado

Paneles translúcidos con backdrop blur fuerte y un borde sutil.

Cómo usarla

Pick a backdrop
Switch between an image, a gradient and a busy pattern in the preview - the glass effect changes meaning with each.
Tune transparency + blur
Background alpha controls how much the backdrop shows through; backdrop blur controls how much it's softened. Both work together.
Add the border + shadow
A 1 px white-ish translucent border gives the glass a physical edge. A soft shadow lifts it off the surface.
Copy the CSS
All four declarations (background, backdrop-filter, border, box-shadow) come in one block, ready to paste.

¿Qué es?

Glassmorphism is the frosted-glass UI aesthetic - translucent panels backed by a strong backdrop blur. The CSS recipe is small: a `background-color` with alpha < 1, `backdrop-filter: blur(...)`, a thin border (often `rgba(255,255,255,0.18)`), generous `border-radius`, and an optional soft `box-shadow` for depth. The illusion only works when there's something colourful behind the panel for the blur to act on - on flat backgrounds the effect collapses to a simple translucent rectangle.

Cuándo usarla

Floating UI surfaces over hero images or videos, nav bars sitting on top of photo backgrounds, modal panels over a blurred backdrop of the page below, cards in marketing pages where the background is a vibrant gradient or photo, and tooltip-like overlays where you want to suggest content layered above the page rather than replacing it.

Errores comunes

Designing the glass card against a flat background in Figma, then being surprised when it looks like nothing in production - test on the actual colourful backdrop. Stacking glass-on-glass (the blur quality degrades and frame rate tanks). Forgetting the border - without it, glass looks like a smudge; the thin highlight is what reads as 'edge of physical glass'. Skipping the box-shadow - depth is what separates glass from cellophane.

Preguntas frecuentes

What is glassmorphism?: A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).
Why does it look like nothing in my project?: Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.
How is this different from a regular semi-transparent background?: `background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.
Is backdrop-filter supported everywhere?: Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.
Why is it bad for performance?: `backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.