backdrop-filter
Applies filters to everything behind the element — the frosted glass effect.
Syntax
backdrop-filter: blur(10px);Values
| Parameter | Type | Description |
|---|---|---|
| blur() | function | Blurs what is behind. |
| brightness() | saturate() | function | Changes the brightness or saturation of what is behind. |
Examples
A frosted glass panel over a photo:
<style>
.photo { height: 150px; background: url(/media/photo-600x200.jpg) center / cover; padding: 30px; }
.glass {
padding: 12px;
background: rgb(255 255 255 / 0.3);
backdrop-filter: blur(8px);
border-radius: 8px;
}
</style>
<div class="photo"><div class="glass">Frosted glass</div></div>Notes
The element must be at least partly transparent, otherwise nothing behind it is visible. Supported in all current browsers; in older ones the panel simply stays semi-transparent.
See also
- filter — Graphic effects on an element: blur, black and white, brightness, shadow by shape.
- ::backdrop — The layer right behind a modal `<dialog>` or an element in full-screen mode.
- opacity — The transparency of the whole element together with its content.
Related recipes
In the tutorial
- Filters — The filter property — blur, black and white, brightness, contrast and the contour shadow drop-shadow, plus backdrop-filter for a frosted glass effect.