What Is backdrop-filter? Frosted-Glass CSS Effects

The backdrop-filter CSS property applies a graphical effect — blur, brightness, contrast, saturation, and more — to whatever is behind an element, rather than to the element itself. It’s the property behind the “frosted glass” look you see in navigation bars, modals, and cards that sit over a busy background: the content underneath stays visible but softened, while the foreground text stays sharp and readable.

How it differs from filter

CSS already has a filter property, and it’s easy to confuse the two. filter changes the appearance of the element it’s applied to — its own pixels. backdrop-filter changes the appearance of everything behind the element, then composites the element on top of that altered backdrop.

.glass-panel {
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

That combination — a semi-transparent background color plus a blurred backdrop — is what produces the frosted-glass effect. The transparency lets the backdrop show through; the blur keeps it from competing with foreground content.

The functions you can use

backdrop-filter accepts the same filter functions as filter, applied to the backdrop instead:

• blur(<length>) — the workhorse for frosted panels
• brightness(<percentage>) and contrast(<percentage>) — dim or punch up the backdrop
• saturate(<percentage>) and grayscale(<percentage>) — mute or desaturate colors behind the element
• opacity(<percentage>) — fade the backdrop toward transparent
• drop-shadow() — less commonly used here, since it shadows the backdrop content rather than the element

Multiple functions can be chained, as in the example above, and they apply in the order written.

Where it shows up in real UI

The most common use is a translucent header or sidebar that stays legible as the page scrolls beneath it — the same idea used throughout the CSS box model but layered with transparency instead of solid backgrounds. Modal dialogs and command palettes often blur the page behind them to draw focus without a fully opaque overlay. Bottom sheets and toolbars on mobile web apps use it to keep controls readable over photos or video.

It pairs naturally with CSS custom properties for theming — swapping a --glass-opacity variable between light and dark mode — and with color-mix() and other CSS color functions to tune the tint layered on top of the blur.

Performance considerations

Backdrop blur is not free. The browser has to render everything behind the element, apply the filter to that region, and recomposite it on every frame the backdrop changes — during scrolling, animation, or video playback underneath it. A few guidelines keep it cheap:

• Limit blurred regions to what’s actually necessary — a header bar, not the whole viewport.
• Avoid stacking multiple overlapping backdrop-filter elements; each one is a separate compositing pass.
• Test on lower-powered devices specifically. Blur cost scales with the pixel area being filtered, and it’s easy to miss jank on a fast development machine.
• Prefer blur() over combinations of several heavy functions when only the frosted look is needed.

If a page is already animation-heavy, consider whether the effect belongs in the critical rendering path at all, or whether it can be deferred until the element is actually visible.

Fallbacks and browser support

backdrop-filter is supported in all major current browsers, but older versions of Safari required the -webkit- prefix, and it’s still good practice to include both:

.glass-panel {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

For browsers that don’t support the property at all, provide a solid or higher-opacity background as a fallback so text stays readable — backdrop-filter should be a progressive enhancement, not a requirement for legibility. That’s the same philosophy behind progressive enhancement more broadly: build a version that works everywhere, then layer on the effects that not every browser supports yet.

Accessibility notes

A blurred backdrop can reduce the contrast between foreground text and the busy content behind it, especially with photos or video. Always check contrast against the worst-case backdrop, not just a calm test image, and keep the semi-transparent background color dark or light enough (depending on theme) that text stays within WCAG contrast guidelines. Users with prefers-reduced-transparency set (a growing but not universal media feature) are signaling that translucent UI causes them problems — where supported, fall back to a solid background for those users.

backdrop-filter vs a blurred background image

A simpler alternative is blurring a copy of the background image itself and placing it behind the panel. The table below shows when each approach fits.

	backdrop-filter	Pre-blurred background image
Reacts to live content behind it	Yes, dynamically	No, fixed at build/export time
Works over video or scrolling content	Yes	No
GPU cost	Recalculated per frame when content moves	One-time image decode
Browser support	Modern browsers	Universal
Best for	Overlays on dynamic or scrolling content	Static hero sections, decorative backgrounds

The takeaway

backdrop-filter blurs, dims, or recolors whatever sits behind an element, which is what makes frosted-glass panels, translucent nav bars, and dimmed modals possible without extra markup. Pair it with a semi-transparent background color, always include the -webkit- prefix for older Safari, keep blurred regions small for performance, and verify contrast against the actual content it will sit over rather than a calm test background.