backdrop-filterBaseline · Newly available
The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Sep 16, 2024.
Browser support
DesktopChrome
1–75Not supported
76+Supportedsince Jul 30, 2019
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–102Not supported
103+Supportedsince Jul 26, 2022
Current: 157Safari
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27MobileChrome Android
18–75Not supported
76+Supportedsince Jul 30, 2019
Current: 155Firefox Android
4–102Not supported
103+Supportedsince Jul 26, 2022
Current: 157Safari iOS
1–17.6Not supported
18+Supportedsince Sep 16, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Sep 16, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: backdrop-filter.
Feature detection
CSS · check before using
@supports (backdrop-filter: initial) {
/* styles that rely on backdrop-filter */
}
/* or in JavaScript */
if (CSS.supports("backdrop-filter", "initial")) {
// use it
}