Glassmorphism That Actually Performs

backdrop-filter: blur() is one of the most-loved and most-abused CSS properties. Used well, it creates depth; used carelessly, it repaints the world on every scroll frame.

Budget your blur

Each blurred surface forces the browser to sample the pixels behind it. Keep the count low — a sticky header and the occasional modal, not every card.

Pair blur with a translucent fill

A blur alone looks muddy. Layer a semi-transparent surface colour and a hairline border on top so the edge stays crisp:

.glass {
  background-color: var(--color-surface);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--color-hairline);
}

Respect reduced transparency

Some users enable Reduce Transparency. Honour it by falling back to a solid panel — it’s a one-line media query and a real accessibility win.

Frosted glass should feel like a finishing touch, not a performance tax.