backdrop-filter

Avatar of Andy Adams
Andy Adams on (Updated on )

The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.

Classic example:

Filtered backgrounds without backdrop-filter

Before backdrop-filter, the only way to add a filtered background was to add a separate “background” element, position it behind the foreground element(s) and filter it like so:

<div class="wrapper">
  <div class="background"></div>
  <div class="foreground"></div>
</div>
.background {
  filter: blur(4px);
  position: absolute;
  width: 100%;
  height: 100%;
}

The backdrop-filter property allows you to eliminate this extra “background” element and apply filters to the backdrop directly:

.foreground {
  backdrop-filter: blur(10px);
} /* No .wrapper needed! */

At the time of writing, backdrop-filter is part of the Filter Effects Module 2 Editor’s Draft and is not officially part of any specification. Browser support is currently limited (see below).

Syntax

.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}

can be any one of the following:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – (for applying SVG filters)

You can apply multiple <filter-function>s to a backdrop, like so:

.element {
  backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
}

See the W3C Filter Effects Module Working Draft for acceptable values for each of the filter functions.

Example

For a comprehensive look at filter functions and nifty ways to use them together, see the filter almanac entry on CSS-Tricks.

The following Pen is forked from an example in Robin Rendle’s article exploring backdrop-filter.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
76103No179*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1231241239.0-9.2*

Resources