CSS Glassmorphism Generator

Glassmorphism is the frosted-glass UI look — a translucent panel that blurs and desaturates whatever is behind it, giving the impression of a pane of glass hovering above the content. The technique became a dominant trend when Apple's macOS Big Sur (2020) and iOS 14 embraced it system-wide, and it remains a staple of modern product design. Microsoft's Fluent Design system, Linear, Apple Music, and many dashboard products use it for cards, sidebars, and modals.

The CSS recipe is surprisingly small. A semi-transparent background colour (rgba(255, 255, 255, 0.25)) lets the backdrop show through. The backdrop-filter property applies a blur to whatever is rendered behind the element — blur(16px) is a typical default. A touch of saturate(140%) boosts the colours behind the glass so they don't look muddy after blurring. A subtle light border (1px solid rgba(255, 255, 255, 0.3)) produces the highlight that sells the glass illusion. That's the whole thing.

Backdrop matters. Glassmorphism only works over a visually-interesting backdrop. On a flat solid colour it just looks like a slightly-tinted panel. Photos, gradients, animated backgrounds, and even blurred content from behind all work well. Our preview offers four backdrops — a multi-colour gradient, a sunset, an ocean gradient, and a photograph — so you can see how your controls translate to different contexts.

Browser support for backdrop-filter is now universal in evergreen browsers, but there's a catch: older Safari needs the-webkit-backdrop-filter prefix alongside the standard property, and we include both in the output CSS. For legacy IE or old Android browsers (increasingly rare), fall back to a solid semi-transparent panel without the blur.

Performance. backdrop-filter is expensive — the browser has to rasterise and blur the pixels behind the element every frame. For static pages, this cost is paid once. For animated content or multiple stacked glass panels, watch frame rate. Two or three glass panels per viewport is fine; twenty is not. Prefer a single glass surface to many small ones when possible.

Accessibility. Glass panels with light text on photos often fail WCAG contrast. Use a darker, more opaque background tint (0.4–0.5 alpha) when text needs to be readable. For body text, a solid panel is almost always better than a glass one — reserve glassmorphism for decorative surfaces like headers, cards containing large type, or informational overlays where reduced legibility is acceptable.

1. Pick a backdrop from the gallery to match your real context.
2. Adjust the blur — 12–20px is a good range for most surfaces.
3. Nudge saturation up to compensate for blur muting colours.
4. Tune background and border opacity for the right amount of translucency.
5. Check legibility — darker/more-opaque backgrounds for text panels.
6. Copy CSS — includes the -webkit- prefix for older Safari.

• Live preview over four realistic backdrops (gradients + photo).
• All five standard controls: blur, saturation, radius, background and border opacity.
• Copy-ready CSS with webkit prefix for Safari compatibility.
• Runs entirely in your browser.