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
Documentation
Specification
Status in Chromium
Enabled by default (tracking bug) in:
- Chrome for desktop release 76
- Chrome for Android release 76
- Android WebView release 76
Consensus & Standardization
- Positive
- Shipped/Shipping
- Shipped/Shipping
- Positive
Owner
Search tags
backdrop-filter, css,Last updated on 2021-01-13