backdrop-filter

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 10 Aug 2026