backdrop-filter
Applies graphical effects like blur or color shifts to the area *behind* an element, allowing you to create frosted-glass effects.
It is documented as part of the Filter Effects specification.
Syntax
/* Usage Example */
.glass-panel {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) brightness(1.2);
/* creates a modern frosted glass/translucent surface */
}
/* Syntax */
backdrop-filter: none;
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;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.
76+
103+
18+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more