CSSbackdrop-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 »background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
Definition and Usage
Thebackdrop-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 aboutanimatable |
| 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 aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
CSS Reference:filter property
CSS Tutorial:CSS Images
HTML DOM reference:filter property
