Glassmorphism that looks expensive, not like a 2021 Dribbble shot

Glassmorphism got a bad name because it was used as a texture: every panel frosted, every button translucent, a rainbow blob behind all of it. Used as a material for a few surfaces, on a background that earns it, it is still one of the best ways to make a dark interface feel made rather than generated.

Glass needs something behind it

Blur is only visible when there is colour to blur. On a flat dark page a glass card is a grey card that costs more to render. The premium versions all have a field behind the glass: a slow aurora of two brand hues, a photo, or a grain texture over a gradient. We covered one way to build that in an aurora background in CSS.

The values that read as expensive

.glass {
  background: oklch(100% 0 0 / 0.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid oklch(100% 0 0 / 0.10);
  border-radius: 20px;
}

• Low fill. Four to eight per cent white is enough. At twenty the card turns milky and the effect is gone.
• A hairline border lighter at the top. Real glass catches light on its edge, and a gradient border that fades from top to bottom sells it. See gradient borders in CSS.
• A little saturation in the filter. Pure blur greys things out; a saturate step keeps the colour behind the glass alive.
• No drop shadow, or a very soft one. Heavy shadows under glass look like plastic.

Where glass belongs, and where it does not

The primary action should be solid. A translucent main button looks unsure of itself, and glass beside a solid accent is what makes the accent read as the thing to press.

Keeping it fast

backdrop-filter is supported in every current browser, with Safari still happiest with the -webkit- prefix alongside it. The cost is paint: the browser blurs what is behind the element each time either moves. Keep glass off elements that animate, avoid stacking glass on glass, and test on a mid-range phone rather than a laptop. If the page scrolls badly, the full-width glass header is the usual suspect.

Glass Instrument UI is our glass done this way: frosted cards with a gradient hairline over an aurora field, a lime primary with a glass secondary beside it, and a list of what the look is not, so Claude never drifts into neon and chrome.