Glass is a material — not a trend

Backdrop-blur is 2026's drop-shadow: everywhere, mostly wrong. This guide explains the four surfaces that make glass read as expensive instead of dirty frosted plastic.

Answers When is a glass effect worth the paint cost?glass reads as a material only when there is something behind it to blur.

Intermediate1 min read (computed · recorded 10)updated 2026-09-09glassglassmorphismmaterialscss

Why most glass looks bad

Glass fails when it's just one blurred gradient blob behind a rounded card. Real glass is a stack of decisions: a base that's dark enough to blur, a specular top edge, a hairline border, and content that doesn't fight the frosted field behind it.

The other failure is light-theme glass. Frosted white-on-white reads as dirty plastic — glass belongs on photographic or gradient canvases, or on a deliberately dark base.

Liquid Glass background →Glass Pricing Trio — glass with real content →

The four surfaces of believable glass

Base fill — semi-transparent white/low-single-digit alpha over something with contrast underneath (photo, gradient, motion).
Specular top edge — an inset 0 1px 0 rgba(255,255,255,.3–.45) highlight. This one line is 50% of the illusion.
Border strategy — border rgba(255,255,255,.12–.18). Too high = plastic rim; too low = the card vanishes.
Blur amount — backdrop-blur(12–24px) reads as glass; 4px reads as 'blurry div'. Match blur to the motion behind it: faster motion behind, more blur.

The recipe we ship

glass-surface.css

.glass {
  background: linear-gradient(180deg,
              rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35), /* specular top edge */
    0 24px 48px -24px rgba(0,0,0,.8);     /* lift, not glow */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* the glow is a privilege, not a default: */
.glass--hero {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),
              0 0 60px -10px rgba(139,92,246,.55);
}

When to skip glass entirely

Honesty check

If the content behind the card is a flat corporate background, glass has nothing to refract — you're just adding blur for fashion. Use a solid token card with a hairline border and spend the saved GPU on typography.