The backdrop-filter property applies effects such as blur to whatever is behind an element, which creates the popular frosted-glass look. Pick a value below to see it live, or type your own.
backdrop-filter: none | <filter-function> [<filter-function> …];
It accepts the same functions as the filter property, and you can combine several, separated by spaces.
| Function | Effect on the background |
|---|---|
blur(12px) | Blurs it; the core of frosted glass |
saturate(180%) | Makes colors richer; pairs well with blur |
brightness(60%) | Darkens (below 100%) or lightens (above 100%) |
contrast(60%) | Lowers or raises contrast |
grayscale(100%) | Removes color |
The element itself must be at least partly transparent, otherwise it hides the blurred background completely. Use a semi-transparent background such as rgba(255, 255, 255, 0.15). There also has to be something interesting behind it: blurring a plain white page shows nothing.
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}
The -webkit- line covers Safari versions before 18. To design glass cards visually, use the Glassmorphism Generator.
The element needs a transparent or semi-transparent background, there must be content behind it, and older Safari versions need the -webkit-backdrop-filter prefix.
filter changes the element itself and its contents; backdrop-filter changes only what is visible behind the element.
Large blurred areas cost more to draw, especially on low-end phones. Keep the blurred area modest and avoid animating the blur value.