Glassmorphism in CSS: The Complete Guide
Glassmorphism is one of the most recognizable UI trends of the past several years. You've seen it everywhere: Apple's macOS menu bar, the iOS Control Center, Windows 11's Acrylic material, and countless modern web dashboards. That signature frosted-glass look — translucent surfaces, soft blur, delicate borders — communicates depth and hierarchy without heavy shadows or gradients. The good news is that replicating the effect in CSS takes fewer than ten lines of code.
The CSS Behind the Glass
The glassmorphism effect is built from four core CSS properties. backdrop-filter: blur() is the star — it applies a blur to everything behind the element. A value between 8px and 20px covers most use cases. Pairing saturate() with the blur intensifies colors bleeding through, mimicking real frosted glass — 180% is a reliable starting point.
A semi-transparent background using rgba() lets the blurred backdrop show through. For a light glass card, rgba(255, 255, 255, 0.15) works well. Finally, a subtle border on semi-transparent white traces the edge and reinforces the material quality. The complete CSS: background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px;.
Browser Support and Fallbacks
backdrop-filter is supported in all major modern browsers — Chrome 76+, Edge, Safari 9+ (with -webkit- prefix), and Firefox 103+. Always include the -webkit-backdrop-filter prefix — Safari still requires it, and forgetting it is the most common reason glassmorphism looks broken on iPhones and Macs.
For older browsers, the fallback is graceful by default — the element renders as a semi-transparent panel without blur. To strengthen the fallback, use @supports not (backdrop-filter: blur(1px)) to increase background opacity so the card remains legible even without the frosted effect.
Designing Effective Glass Elements
Here is the mistake most developers make: they apply the CSS to a card on a plain white or solid dark background and wonder why it looks boring. Glassmorphism needs something interesting behind it to blur. Think of it like a real frosted window — hold it up in front of a blank wall and you see an opaque white pane; hold it up in front of a sunlit garden and you get the iconic soft glow.
A colorful gradient background is the most effective approach. Multi-stop gradients with vibrant hues create the rich, shifting blur that makes glass cards pop. Abstract photography, illustrated backgrounds, and blurred gradient blobs all work well. The background is half the design.
Accessibility Concerns
Glassmorphism introduces real accessibility risks. Because the text sits above a blurred, shifting background, the contrast ratio is not fixed — it changes depending on what's behind the card. The WCAG 2.1 AA standard requires at least 4.5:1 for normal text. Ensure the glass opacity is high enough, or add a subtle darkening overlay beneath text content.
prefers-reduced-transparency is a media query that respects users who have enabled "Reduce transparency" in their OS. Honoring it is straightforward — remove the blur and increase background opacity. It's a small addition that meaningfully improves the experience for a subset of your users. Always run your final design through a WCAG contrast checker.
Combining Glassmorphism with Gradients
The gradient-plus-glass combination has become its own design language. Build a rich multi-color gradient background, then float glass cards on top. You don't need a full-page gradient — large, soft blurred color blobs positioned behind your glass card create the same effect in a contained space. This technique is common in SaaS landing pages and dashboard UIs.
When choosing gradient colors, lean toward 60-80% saturation rather than pure neons. Fully saturated colors look garish behind frosted glass. Use our CSS Gradient Generator to experiment with angle, stops, and saturation until the background produces the blur quality you're after.
Putting It All Together
Glassmorphism is genuinely straightforward once you understand the four pillars: blur, semi-transparent background, subtle border, and a rich backdrop. Our Glassmorphism Generator lets you adjust blur, opacity, saturation, border, and border-radius in real time and copies the resulting CSS — including vendor prefixes — to your clipboard. Pair it with the CSS Gradient Generator to design background and glass surface together, and you can go from idea to production-ready CSS in minutes. No server, no account, no data leaving your browser.