← Back to release summary

CSS backdrop-filter property

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 76)
Intent stage
Evaluate readiness to ship

Summary

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.

Standards & signals

Docs: https://groups.google.com/a/chromium.org/g/blink-dev/c/GRl1_Qy97jM/m/h7v1qIDsBwAJ

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

Explainers: https://github.com/mfreed7/backdrop-filter-feature

View on chromestatus.com