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.

Générateur de glassmorphisme

Verre dépoli en CSS avec aperçu en direct - ajustez couleur de fond, backdrop blur, bordure et ombre sur un fond chargé.

Fonctionne dans votre navigateur

Glassmorphisme = fond translucide + backdrop blur fort + bordure fine + ombre douce. L'aperçu place votre carte au-dessus d'un fond chargé pour rendre le blur visible (l'effet est invisible sur un fond uni - il a besoin de quelque chose derrière). Les quatre ingrédients ont des curseurs ; l'aperçu se met à jour en direct et le bloc CSS est prêt à copier.

Arrière-plan

Couleur de fond

Opacité fond20%

Couleur de bordure

Opacité bordure35%

Backdrop blur16px

Border radius16px

Flou de l'ombre32px

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);

Aperçu

Verre dépoli

Panneaux translucides avec un backdrop blur fort et une bordure subtile.

Comment l'utiliser

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'est-ce que c'est ?

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.

Quand l'utiliser

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.

Erreurs courantes

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.

FAQ

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.