backdrop-filter

backdrop-filter applies a filter effect — blur, brightness, saturation, and more — to whatever is BEHIND an element, rather than to the element's own content. It uses the same filter functions as the regular filter property (blur(), brightness(), contrast(), saturate()...), but points them at the backdrop instead. This is the CSS behind the ubiquitous "frosted glass" look: a translucent panel with a soft blur showing through it, used everywhere from macOS window chrome to mobile navigation bars.

filter vs. backdrop-filter

	filter	backdrop-filter
Applies to	The element's own box and its content	Whatever renders behind the element
Typical use	Blur/desaturate an image, grayscale a card	Frosted glass panels, translucent overlays, dimmed modals
Functions	blur(), brightness(), contrast(), grayscale()...	Same functions, applied to the backdrop instead

Worked example — a frosted navigation bar

CSS

.navbar {
  position: sticky;
  top: 0;

  /* Semi-transparent background — required for backdrop-filter to be visible */
  background: rgba(255, 255, 255, 0.6);

  /* Blur and slightly brighten whatever scrolls underneath */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%); /* Safari */

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

As content scrolls underneath this bar, it appears through a soft frosted-glass blur rather than either being fully hidden by an opaque bar or fully sharp behind a see-through one.

Transparency is required to see the effect

backdrop-filter only affects what shows THROUGH the element — if the element is fully opaque, there is nothing to see through and the blur is invisible.
Give the element some transparency: a semi-transparent background-color (like rgba(255,255,255,0.6)), or no background at all if you only want the border/shadow visible.
The blur amount and the background opacity work together — a lighter background opacity lets more of the blurred backdrop color show through.

A modal dimmer with backdrop-filter

CSS

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

Performance considerations

backdrop-filter is relatively expensive to render — the browser has to continuously composite and re-blur everything underneath the element, especially while it scrolls or the content behind it changes. Applying it to a fixed/sticky bar over a scrolling page, or to many elements at once, can visibly hurt scroll performance on lower-powered devices. Use it sparingly on elements that are frequently repainted, and test on real (not just high-end) hardware before shipping it broadly.

For filtering the element's own content instead of what's behind it, see [CSS Filters](/css/css-filters).