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:
CodePen Embed Fallback
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:
.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 “Browser Support” below).
Syntax
.element {
backdrop-filter:
}
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
.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.
CodePen Embed Fallback
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.DesktopChromeFirefoxIEEdgeSafari76NoNo179*Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari84No819.0-9.2*
Related
filter
Resources
The backdrop-filter property by Robin RendleMDN entry on backdrop-filter