CSS Glassmorphism Generator

Glassmorphism is a lens, so it needs something interesting behind it. Colorful gradients, blurred photography, and floating colored shapes give the blur visible texture to diffuse. Flat single-color backgrounds are the most common reason the effect disappears, there is nothing to blur, so the panel reads as a plain semi-transparent box. If your design has a flat background, add two or three soft radial gradient blobs behind the glass panel first.

Pure blur washes colors out – colors behind the glass become muted greys and pastels. Adding saturate(180%) to backdrop-filter pumps the saturation BACK UP so colors stay vivid through the frost. This is what makes Apple’s translucent macOS UI look “alive” instead of “milky”. 180% is the standard Apple-style value; 200%+ gets neon-bright.

Even though Safari supports backdrop-filter in current versions, it still requires the -webkit- prefix to actually render the effect. Without the prefix, Safari fails silently – your glass renders as a flat tint. The tool outputs both versions automatically.

Yes, since Firefox 103 (July 2022, enabled by default). Older Firefox versions show the backdrop-filter as a no-op – the background tint remains visible but there’s no blur. For graceful degradation, the tint opacity should be high enough that the card is still readable without blur.

For light backgrounds: white at 0.15-0.25 (Apple uses ~0.18). For dark backgrounds: black or slate at 0.30-0.50. The lower the opacity, the more colors bleed through – but the harder it is to read text on the glass. Always check contrast.

Yes – backdrop blur is one of the most GPU-intensive CSS effects. Animating it (e.g. hover transition on blur radius) causes visible jank on mid-range phones. Recommendation: avoid animating the blur value itself; animate background opacity instead, which is much cheaper.

Three common causes: (1) you forgot the -webkit-backdrop-filter prefix and you’re testing on Safari. (2) The parent element has overflow: hidden AND a transform – backdrop-filter breaks in some browsers under that combination. (3) There’s nothing behind the element to blur – backdrop-filter shows nothing if the parent has a solid background with no visible content underneath.

Text on glass over busy backgrounds often fails WCAG AA contrast checks. The blurred backdrop is non-deterministic – what looks fine on a calm photo fails on a vibrant one. For text-heavy components, either (a) keep tint opacity above 0.40 to “darken” enough for legibility, or (b) reserve glassmorphism for non-critical UI (decorative panels, modals, not body text).

Yes. Everything runs in your browser. No CSS values, colors, or text are uploaded anywhere.