Understanding glassmorphism
Frosted glass, in three CSS properties.
What makes the frosted-glass look work, when to use it, and the contrast problem it always creates.
Three properties, one effect.
The glassmorphism recipe in CSS: a semi-transparent background colour, a backdrop-filter: blur() to frost the content behind, a thin border to give the card an edge. That's the whole effect — the rest is colour-picking and shadow refinement. background: rgba(255,255,255,0.15);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.25);
The vital prerequisite: a busy background.
Glassmorphism is the effect of blurring something behind the glass. If the background is flat white, there's nothing to blur — the glass looks like a rectangular grey patch. The effect needs visual texture behind it: a gradient, a photograph, a particle background, the document content. Designers who try to add glassmorphism to a plain card get something subtler than they wanted; the effect needs the noise to work.
Browser support, and the Firefox catch.
backdrop-filter shipped in Safari (2018), Chrome (2019), Firefox (with a flag earlier, default-on around 2022). Today every evergreen browser supports it. The catch: Firefox on Linux without compositing can degrade gracefully (no blur, semi-transparent only). For older browsers, use a fallback: same colour, no blur. The graceful degradation is usually acceptable — the design works without the effect, just feels less premium.
A worked glass card.
A glass card over a hero image: background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
border-radius: 16px; The gradient gives the surface a slight shimmer (lighter at top-left); the blur+saturate enhance the frosted look; the border defines the edge; the shadow lifts the card; the radius softens it. Five properties; one premium look.
Five-property glass card
bg + backdrop-filter + border + shadow + radius
Each contributes one visual cue.
rgba(255,255,255,0.15) + blur(20px) + 1px border + soft shadow
= Frosted-glass card
The contrast problem.
Glass cards by definition have semi-transparent backgrounds, which means the text on them sits over the (blurred) content behind. WCAG contrast ratios are measured against the actual rendered colour, not the card's nominal background. A "white text on glass" card over a varying photo might pass contrast in one spot and fail in another. The fix: use a darker text colour, ensure the background tint is dense enough (0.7-0.8 alpha minimum for important text), or add a text-shadow as a contrast boost.
Performance on mobile.
backdrop-filter triggers GPU work on every paint. One glass card is fine; ten stacked glass cards each blurring 20px on a low-end Android phone is a noticeable framerate hit. Use the effect sparingly — one or two glass surfaces per view. For overlays with lots of cards, fall back to flat semi-transparent backgrounds with subtle gradients; the visual story is similar, the rendering cost is much lower.