Skip to main content
Home / CSS Almanac / Properties / B / backdrop-filter

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:

See the Pen
PwRPZa
by Guillermo Esteves (@gesteves)
on CodePen.

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(0.8);
  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(0.8);
} /* 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 "Browser Support" below).

Syntax

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

<filter-function> 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.

See the Pen scrollbar-color example
by CSS-Tricks (@css-tricks) on CodePen.

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

ChromeOperaFirefoxIEEdgeSafari
7664NoNo179*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.0-9.2*NoNo7678No

Related

Resources