CSS Frosted Glass Generator
backdrop-filter applies a filter, like blur, to everything behind an element. Give the element a see-through background and you get the frosted glass look without duplicating the background image.
Presets
blur()
saturate()
Background tint
Border radius
Edge
Safety
Live preview
Frosted glass card
The colored shapes behind this card blur out. The effect only shows when something sits behind it.
Generated CSS
backdrop-filter Browser Support
Newly availableSince 202493% 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+