What it builds
CSS rules that produce frosted-glass UI panels, semi-transparent backgrounds with backdrop-filter blur and saturation, plus a soft border. The preview shows your settings against a colorful gradient so you can see how the glass effect blends.
Glassmorphism became popular in 2020-2021 with macOS Big Sur and Windows 11. It’s an evolution of the older “frosted glass” UI from iOS 7. The effect is purely cosmetic but adds significant visual hierarchy when used sparingly.
Four presets
- Light: white tint, medium blur. Default for most light-mode UI.
- Dark: dark surface tint, more blur. For dark mode.
- Frost: cool blue tint with heavy blur and saturation. Most “icy” look.
- Vibrant: high saturation, low blur. Punches up colors behind the glass.
When to use glassmorphism
- Modal overlays: glass over a blurred backdrop is more elegant than a plain dim
- Floating action panels: settings drawers, command palettes, mobile bottom sheets
- Hero sections: glass card on top of a colorful image or gradient
- Stacked notifications: each notification card with subtle glass
When NOT to use it:
- Body text that needs sharp contrast, glass reduces readability
- Pages with heavy ad slots, backdrop-filter can mess with ad rendering
- Fast-scrolling content, backdrop-filter is expensive to render and can cause jank
Browser compatibility
backdrop-filter works in all modern browsers, but Firefox required a flag until late 2022. The -webkit- prefix in the output is for older Safari. As of 2024+, you don’t strictly need both, but including the prefix doesn’t hurt.
If targeting older browsers, fall back to a solid semi-transparent background. The visual difference is significant but the layout works either way.
Performance notes
backdrop-filter is GPU-accelerated but expensive, every pixel under the glass element has to be re-rendered with the filter applied. For large glass surfaces (full-page overlays), expect framerate drops on low-end mobile.
Limit glass to elements that need it. A 200×200px glass card is cheap; a full-screen glass modal is heavy.
Frequently asked questions
Why doesn’t the backdrop filter work?
Two common reasons: (1) the parent element has overflow: hidden clipping the filter; (2) the element behind the glass is on the same compositing layer. Both fix with transform: translateZ(0) on the glass element.
Can I use this without backdrop-filter? Pre-2020 designs used a static blurred background image. Looks similar but doesn’t update with content underneath.
What contrast ratio works for text on glass? Aim for at least 4.5:1 between the text color and the most-likely-contrast pixel underneath. With a colorful background, you can’t guarantee any specific contrast, keep glass overlays for chrome, not body text.