backdrop-filter
The backdrop-filter property applies graphical effects to the area behind a translucent element.
Syntax
backdrop-filter: <function>...; /* e.g. blur(10px) */
Examples
.glass-nav {
background: rgb(255 255 255 / 0.6);
backdrop-filter: blur(12px) saturate(1.5);
}
Output
Renders a frosted-glass navigation bar that blurs and saturates the content scrolling behind it.
Notes
Requires a semi-transparent background to be visible. It is the basis of the "glassmorphism" effect. Can be performance-heavy on large areas; provide a solid-background fallback for unsupported browsers.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 76 |
| firefox | 103 |
| safari | 9.0 |
| edge | 79 |