CSS Reference Property

backdrop-filter

CSSReference_backdrop-filter

The backdrop-filter property allows us to apply filter effects to the content behind an element using CSS.

This property is an extension to the Filter Effects Module Level 1 that defines the filter property. It uses the same syntax as the filter property but the effects are applied to the backdrop of the element instead. Such effects are commonly seen in interfaces for devices running iOS7 and above, as well as OS X Yosemite and above. Without this property, this effect could only be achieved by editing the background image itself and applying clipping and positioning techniques.

For the property to have any visible effect, there need to be 2 elements stacked on top of each other along the z-axis, from either nested elements or from absolute positioning. Also, the background of the element which backdrop-filter is applied to, needs to be semi-transparent. backdrop-filter works by making the browser engine target the content behind the styled element, and not the background of the element itself. The filter effect is then applied to that content, and the backdrop is composited with other elements on the page in the final rendering.

Applying backdrop-filter to an element also creates a new stacking context, just like when opacity is applied.

Note that the use of this property can have adverse effects on performance, especially when applied to a large number of elements or a large area of the page, and should therefore be used with careful consideration.

Official Syntax

Syntax:

backdrop-filter: none | <filter-function-list>

Initial: none
Applies To: All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements
Animatable: Yes

Values

none: This is the initial value. No filter effect is applied to the backdrop.

<filter-function-list>

A space-separated list of filter functions, applied in the order in which they are declared. The following is the list of filter functions available, which are the same as those for the filter property.

Examples

The following is a simple example of using the backdrop-filter property to create a frosted glass effect. The markup is an image and a div containing the text for its caption.

<div class="container">
  <img src="https://ichef.bbci.co.uk/images/ic/976x549_b/p0121stm.jpg">
  <div class="caption">
    <h3>Morgana</h3>
    <p>played by Katie McGrath</p>
  </div>
</div>

The caption is positioned absolutely over the bottom of the image and the backdrop-filter is applied to it.

.caption {
  padding: 0.5em 1em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
  background-color: rgba(255, 255, 255, 0.5);
}

The final effect should look like this: CSS Reference background-filter example

Live Demo

This property is currently only supported (and thus viewable) in Safari 9 onwards. It is possible to enable this CSS property on Chrome and Opera by enabling the “Experimental Web Platform Features” flag.

The following demo is an example of how we can adjust the text color depending on the background color, i.e. have light text on a dark background and vice versa, by applying the inverse() filter to the text, then re-inverting the background behind the filter with backdrop-filter.
View this demo on the Codrops Playground

This next demo is an example of how we can create a night-mode effect toggle using the inverse() filter.
View this demo on the Codrops Playground

We can also make use of the blur() filter to create a graphic content toggle:
View this demo on the Codrops Playground

Browser Support

CSS Backdrop Filter

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

Unofficial or W3C "Note"

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com