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.

Générateur de glassmorphism CSS

Composez des panneaux UI en verre dépoli avec un aperçu en direct sur quatre arrière-plans. Génère du CSS multi-navigateurs avec l'astuce saturate() qui rend le verre vraiment premium.

Arrière-plan de test

Couleur de teinte

Opacité de la teinte: 0.18

blur (flou): 16px

saturation: 180%

Bordure (couleur · opacité)

0.25

Rayon des coins: 20px

Ajouter une ombre douce

Aperçu

Panneau de verre

Posez cette carte sur un arrière-plan coloré et le verre va réfracter tout ce qui se trouve derrière.

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

Le glassmorphism repose sur trois ingrédients : une teinte de fond translucide, un backdrop-filter bien flou, et un léger reflet de bordure. Empilez tout ça sur un arrière-plan coloré (dégradé, photo ou formes géométriques) et vous obtenez l'effet verre dépoli haut de gamme popularisé par Big Sur d'Apple.

Comment utiliser

Composez des panneaux UI en verre dépoli avec un aperçu en direct sur quatre arrière-plans. Génère du CSS multi-navigateurs avec l'astuce saturate() qui rend le verre vraiment 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.

Fonctionnalités

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

Questions fréquentes

En savoir plus

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