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);
}

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-filter is 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: 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
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.