Frosted glass over anything
CaveatThe element needs its own translucent background. Fully opaque and there is nothing to see through; fully transparent and most engines skip the filter entirely. Somewhere near 40% is where it reads as glass.
FallbackIt blurs whatever is painted behind it, so it is only worth the cost over something worth blurring. Over a flat colour it is an expensive way to draw that same colour.
.glass {
backdrop-filter: blur(11px);
/* without this there is nothing to see */
background: rgba(11, 14, 20, .42);
border: 1px solid rgba(255,255,255,.16);
}Published
Questions
Why is my backdrop-filter blur not showing?
Most often the element's background is fully opaque, so the blur is hidden underneath it, or fully transparent, which lets engines skip it. Give it a translucent background around 40% alpha, and make sure something with detail is actually behind it.
Why does backdrop-filter only blur part of what is behind it?
An ancestor with opacity, filter, mask or its own backdrop-filter becomes a backdrop root, and the blur only reaches content painted inside that ancestor. Move the glass element out of it, or put the effect on the ancestor instead.
Does backdrop-filter need the -webkit- prefix?
Older Safari versions only understand -webkit-backdrop-filter, so write the prefixed line before the standard one if you support them. Current engines read the unprefixed property.