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.

CSS Glassmorphism-Generator

Baue Milchglas-UI-Panels mit Live-Vorschau auf vier Hintergründen. Liefert browserübergreifendes CSS inklusive saturate()-Trick, der das Glas hochwertig wirken lässt.

Test-Hintergrund

Tönungsfarbe

Tönungs-Deckkraft: 0.18

blur (Weichzeichnung): 16px

saturation (Sättigung): 180%

Rahmen (Farbe · Deckkraft)

0.25

Eckenradius: 20px

Sanften Schlagschatten hinzufügen

Vorschau

Glas-Panel

Lege diese Karte über einen beliebigen bunten Hintergrund — das Glas bricht alles, was sich dahinter befindet.

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

Glassmorphism braucht drei Zutaten: eine durchscheinende Hintergrundtönung, einen kräftigen backdrop-filter-Blur und ein dezentes Rahmenlicht. Lege das alles über einen farbigen Untergrund (Verlauf, Foto oder geometrische Formen) und du bekommst den hochwertigen Milchglas-Look, den Apple mit Big Sur populär gemacht hat.

Anleitung

Baue Milchglas-UI-Panels mit Live-Vorschau auf vier Hintergründen. Liefert browserübergreifendes CSS inklusive saturate()-Trick, der das Glas hochwertig wirken lässt.

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.

Funktionen

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

Häufig gestellte Fragen

Mehr erfahren

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