CSS backdrop-filterProperty
Example
Add graphical effects to the area behind the 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;
}
Try it Yourself »
Browser Support
Numbers in the table indicate the first browser version that supports this property.
The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 17 | 103 | 9.0 -webkit- |
63 |
Tag definition and usage instructions
The backdrop-filter CSS property lets you apply graphical effects (such as blur or color shift) to the area behind an element.
Because it applies to everything behind the element, to see the effect, the element or its background must be 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 to be applied to the background. |
/* Keyword values */
backdrop-filter: none;
/* URL pointing to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 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;
backdrop-filter: none;
/* URL pointing to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 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;