Generate frosted-glass UI — backdrop-filter blur + transparent bg. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.
Use Cases
Style modal overlays and popovers with depth
Add frosted-glass effects to navbar headers
Match the iOS/macOS visual language in web UIs
Prototype card-hover states with frosted-glass emphasis
Tips
backdrop-filter works best over a colorful background image
Add -webkit-backdrop-filter for Safari/iOS support
Keep opacity between 0.1 and 0.25 for the sweet spot
Fun Facts
Glassmorphism was popularized by Apple's macOS Big Sur in 2020 and Microsoft's Fluent Design System before it.
The backdrop-filter CSS property was first proposed in 2014 but Safari was the only browser to support it for 5 years — Chrome didn't ship it until 2019.
Glassmorphism requires compositing the background through a blur kernel, which can drop mobile frame rates by 30-50% if overused on low-end devices.
FAQ
What browser support does backdrop-filter have?
All modern browsers since ~2021. Safari had it earlier with -webkit- prefix. For IE/legacy Edge use a semi-transparent fallback color.
Why does the blur look different in Safari?
Safari applies backdrop-filter slightly more aggressively than Chrome. Bump saturation up a notch in Safari for visual parity.
Is glassmorphism a11y-friendly?
Depends on the text contrast behind the glass. The tool shows an estimated contrast ratio against the preview; aim for 4.5:1.
What about the fallback?
The tool includes a `@supports not (backdrop-filter: blur(10px))` block with a solid-color fallback — copy both rules together.
