CSS backdrop-filter Property

Definition and Usage

backdrop-filter This attribute is used to apply graphical effects to the area behind the element.

Tip:To see the effect, the element or its background must be at least partially transparent.

Example

Add graphical effects to the area behind the element:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Try It Yourself

CSS Syntax

backdrop-filter: none|filter|initial|inherit;

Attribute Value

Value Description
none Default Value. Does not apply any filters to the background.
filter

A list of filter functions separated by spaces, such as:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

or points to the URL of an SVG filter.

initial Sets this attribute to its default value. See initial.
inherit Inherits this attribute from its parent element. See inherit.

Technical Details

Default Value: none
Inheritance: No
Animation Creation: Supported. See:Animation-related Attributes.
Version: CSS3
JavaScript Syntax: object.style.backdropFilter="grayscale(100%)"

Browser Support

Numbers in the table indicate the first browser version to fully support this attribute.

Numbers with -webkit- prefix indicate the first version to support this prefix.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

Related Pages

Tutorial:CSS Images

Reference:CSS filter property

Reference:HTML DOM filter Attribute