Glassmorphism done right: restraint over flash

Glassmorphism gets a bad reputation because most implementations crank every dial to eleven: heavy blur, loud gradients, borders glowing like neon signs. The result looks like a tech demo, not an interface.

The trick is restraint. Three rules keep frosted glass usable.

1. Keep the fill nearly invisible

The glass background should sit between 3% and 10% opacity. Anything more and you lose the depth effect that makes the style work in the first place.

.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
}

2. Borders do the heavy lifting

A 1px border at low white opacity is what sells the "edge of glass" illusion. Skip the border and the card melts into the background; make it too bright and it looks like a wireframe.

3. Blur needs something to blur

Backdrop blur over a flat color is wasted GPU time. Put a subtle gradient orb or some color variance behind the glass, and suddenly the blur has a job to do.

Accessibility still applies

Low-opacity surfaces can tank your contrast ratios fast. Test your text against the darkest and lightest thing that can appear behind the glass, not just the average. If body text drops below 4.5:1, bump the text color, not the glass opacity.

Subtle is the entire point. If someone notices the glassmorphism before the content, you have overdone it.