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:
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
- 76
- 103
- No
- 64
- 18
Mobile / Tablet
- 18
- 130
- No
- 130
- 130