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.

CSS Glassmorphism | DevTools Surf

DevTools Surf

Example: CSS Glassmorphism

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

blur=14px opacity=0.2 color=255,255,255 radius=16px

Output

.glass {
  background: rgba(255,255,255, 0.2);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

About CSS Glassmorphism

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.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus