CSS Glassmorphism Generator
Visual frosted-glass CSS builder. 9 controls including backdrop-saturate, 6 presets, 4 background scenes to test against. Free, offline, client-side, instant.
Frosted-glass CSS with 9 controls including the secret-sauce backdrop-saturate (the trick Apple uses to make colors pop through frost). 6 presets and 4 background scenes to test your glass against.
Glass Card
Frosted glass effect with backdrop-filter.
Backdrop filter
Background tint
Border
Shadow
Card content
CSS
HTML
How to Use CSS Glassmorphism Generator
- Pick a preset (Apple Style is the safest default) - preview updates instantly on the chosen background scene.
- Switch the background scene (gradient / photo-like / checkerboard / solid dark) to verify your glass holds up against different backdrops.
- Tune Blur (0-40px) and Saturate (100-300%) - saturate is the trick that makes colors POP through the frost (Apple uses 180% on macOS).
- Adjust Background tint (color + opacity). Real glass uses white at low opacity (0.15-0.25), not the same color as the border.
- Set Border (color, opacity, width, radius). Borders are usually white at 0.3 opacity - the highlight effect catching light at the glass edge.
- Add Shadow (blur + opacity) for depth. A flat glass with no shadow looks like a flat tint.
- Edit card title and body. Copy CSS, copy HTML, or download
glassmorphism.css.
Frequently Asked Questions
What kind of background makes the glass effect look best?
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.
Why is backdrop-saturate so important?
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.
Why does Safari need -webkit-backdrop-filter?
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.
Does Firefox support backdrop-filter?
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.
What background-tint opacity is right?
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.
Is backdrop-filter expensive on mobile?
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.
Why does my glass look like a flat tint?
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.
Accessibility concerns with glassmorphism?
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).
Is my data secure?
Yes. Everything runs in your browser. No CSS values, colors, or text are uploaded anywhere.