CSS backdrop-filter Property

❮ Previous Complete CSS Reference Next ❯

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.

Show demo ❯

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.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	Demo ❯
filter	A space-separated list of filter-functions like: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() 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

CSS Reference: filter property

CSS Tutorial: CSS Images

HTML DOM reference: filter property