CSS backdrop-filter Property
Example
Add a graphical effect to the area behind an element:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
Try it Yourself »
Definition and Usage
The backdrop-filter
property is used to apply
a graphical effect to the area behind an
element.
Tip: To see the effect, the element or its background must be at least partially transparent.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.backdropFilter="grayscale(100%)" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specifies the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
backdrop-filter | 76 | 79 | 103 | 9 -webkit- | 63 |
CSS Syntax
backdrop-filter:
none|filter|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
none | Default value. No filter is applied to the backdrop | Demo ❯ |
filter | A space-separated list of filter-functions like:
or an url to an SVG filter that will be applied to the backdrop |
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS Reference: filter property
CSS Tutorial: CSS Images
HTML DOM reference: filter property