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);
}
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
Definition and Usage
The backdrop-filter property is used to apply a graphical effect (Blur, Color Changing, Applying Filters etc.) 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. |
| Version: | CSS3 |
| JavaScript syntax: | object.style.backdropFilter="grayscale(100%)" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
backdrop-filteris applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes.
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.0 | 17.0 | 70.0* | 9.0 -webkit- | 63.0 |
* To get this to work, open about:config and set thelayout.css.backdrop-filter.enabled to true, and also the gfx.webrender.all preferences needs to be set to true.
CSS Syntax
backdrop-filter: none|filter|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| none | Default value. No filter is applied to the backdrop | |
| filter | A space-separated list of filter-functions like:
or an url to an SVG filter that will be applied to the backdrop |
|
| initial | Sets this property to its default value. | |
| inherit | Inherits this property from its parent element. |
Comments
Post a Comment