CSS backdrop-filter Property
Example
Add graphic effects to the area behind an element:
.box {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The numbers following -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| backdrop-filter | 76 | 17 | 103 | 9.0 <br>-webkit- | 63 |
Definition and Usage
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
Since it applies to everything behind the element, to see the effect, you must make the element or its background at least partially transparent.
Syntax
backdrop-filter: <filter-function-list>
| Value | Description |
|---|---|
| none | No filter is applied to the background. |
| <filter-function-list> | A space-separated list of filter functions (<filter-function>) or an SVG filter that is applied to the background. |
/* Keyword value */
backdrop-filter: none;
/* URL to an SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;