backdrop-filter in CSS: the frosted glass effect that blurs what's behind

That settings panel that slides over a phone's screen, letting everything underneath show through in a blur: that is the frosted glass effect, now a classic of modern interfaces. backdrop-filter is the property that makes it possible in pure CSS, with no image and no manual layering.

Its name being so close to CSS filter fuels a common mix-up, even though the two properties do not act on the same thing at all.

Definition

backdrop-filter applies one or more visual effects, using the exact same functions as filter such as blur() or saturate(), but to whatever sits behind the element rather than to the element itself. For the effect to be visible, the element needs to let some of what is underneath show through: a fully opaque background-color would hide everything there is to blur.

.glass-panel {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

backdrop-filter versus filter

The difference comes down to one question: what gets transformed? With filter, it is the element's own render and its content. With backdrop-filter, it is everything visually behind it, seen through its transparent or semi-transparent areas, while the element's own content stays untouched and unblurred.

Why transparency is required

Without some amount of transparency, there is simply nothing to blur through the element: an opaque background already fully hides whatever sits underneath, no matter what value backdrop-filter is given. The effect also assumes a properly built stacking context: the element needs to be positioned above the content it is meant to blur, otherwise there is nothing behind it left to reveal.

Typical use cases

A navigation bar that stays readable as content scrolls under it, a modal window sitting on top of the rest of the interface, or a mobile operating system's control center: these are the three contexts where backdrop-filter shows up most often. In all three cases, the principle stays the same, a panel needs to stay readable without fully hiding what it covers, giving the user a visual anchor to the content still underneath. The effect works especially well over a moving background, like a scrolling page, since the blur hides the changing detail while still hinting at its dominant colors.

Compatibility and fallback

Safari long required the -webkit-backdrop-filter prefix before recognizing the standard property, and it remains common to declare both versions back to back to cover as many devices as possible. On a browser that ignores the property entirely, no error shows up: the element simply keeps its transparency without the blur, which stays a visually acceptable fallback as long as the chosen background also works without the effect.

Frequently asked questions

The most common cause is a fully opaque background: without transparency on background-color, there is nothing left to blur through the element. Also check that the browser recognizes the property, or that the -webkit- prefix has been added alongside the standard version.

Support has become widespread on modern browsers, but some older versions still ignore it silently. Always plan a semi-transparent background that stays visually correct even if the blur effect never applies, rather than counting on it being guaranteed.

Yes, nothing prevents blurring an element's own content with filter while also blurring whatever sits behind it with backdrop-filter. Both properties coexist without conflict since they never act on the same visual layer.