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.

Motivation

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

• https://codepen.io/robinrendle/full/LmzLEL
• https://codepen.io/netsi1964/full/JqBLPK
• https://codepen.io/pepf/full/GqZkdj
• https://codepen.io/SitePoint/full/xRpvzX

Documentation

• https://groups.google.com/a/chromium.org/forum/?utm_medium=email&utm_source=footer#!msg/blink-dev/GRl1_Qy97jM/h7v1qIDsBwAJ

Specification

Editor's draft

Status in Chromium

Blink components: Blink>CSS

Enabled by default (tracking bug) in:

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

Consensus & Standardization

• Firefox: Positive
• Edge: Shipped/Shipping
• Safari: Shipped/Shipping
• Web Developers: Positive

Owner

• masonf@chromium.org

Search tags

Last updated on 2021-03-17