CSS backdrop-filter property

The backdrop-filter CSS property applies one or more filters to the "backdrop" of an element. The "backdrop" basically means all of the painted content that lies behind the element. This allows designers to construct "frosted glass" dialog boxes, video overlays, translucent navigation headers, and more.

Ever since Webkit shipped a prefixed version of this feature in 2015, developers have been asking for Chromium to implement it. The main Chromium feature tracking bug has 574 stars as of June 12, 2019. A number of web design blogs highlight this "cool" feature, and bemoan the lack of Chromium support. It is clear from the comments on the bug, and in the general discussions around the web, that this feature is highly desired by designers. We should make it available to them.

Demos

Documentation

Specification

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 76
  • Chrome for Android release 76
  • Android WebView release 76

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Last updated on 2019-06-21