Easily manage projects with monday.com
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
Chrome | Opera | Firefox | IE | Edge | Safari |
---|---|---|---|---|---|
76 | 64 | No | No | 17 | 9* |
Mobile / Tablet
iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
---|---|---|---|---|---|
9.0-9.2* | No | No | 76 | 78 | No |