backdrop-filter
Applies graphical effects like blur or color shifts to the area *behind* an element, allowing you to create frosted-glass effects.
Quick example
.glass-panel {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) brightness(1.2);
/* creates a modern frosted glass/translucent surface */
}Quick facts
Initial value
noneInherited
No
Applies to
all elements and SVG container elements
Animation type
filterList
Values
none backdrop-filter Browser Support
Newly available Since 2024 93% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
76+
103+
18+
79+