backdrop-filter

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

Resources

• The backdrop-filter property by Robin Rendle
• MDN entry on backdrop-filter

Related