Glassmorphism CSS Tutorial: Create Frosted Glass Cards (Fast and Readable)

Glassmorphism creates semi-transparent, blurred "frosted glass" panels over colourful backgrounds. Used sparingly, it gives hero sections and stat cards a modern, premium feel. This glassmorphism CSS tutorial shows how to build it properly.

The effect

.glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,.2);
  padding: 24px;
  color: #fff;
}

Key ingredients: - Semi-transparent background - backdrop-filter: blur(): blurs what's behind the element - Subtle light border, like glass edges - Soft shadow for depth

It needs something behind it

Glass only looks like glass over a colourful or detailed background:

.hero {
  background: radial-gradient(circle at 80% 20%, #2a7de8 0, transparent 40%),
              radial-gradient(circle at 10% 90%, #F5C400 0, transparent 35%),
              #0b1630;
}

Fallback for unsupported browsers

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(15, 25, 50, 0.85); }
}

Keep text readable

• Check contrast: light text needs a dark enough background behind the glass
• Increase background opacity slightly for text-heavy cards
• Avoid glass over busy photos with text on top

See accessibility basics.

Performance

backdrop-filter is GPU-intensive. On low-end phones, many large blurred elements can make scrolling choppy. - Use it on a few accent elements (hero cards, navbar), not every card - Reduce blur radius on mobile - Avoid animating blurred elements continuously

@media (max-width: 768px) { .glass { backdrop-filter: blur(8px); } }

A glass navbar

.navbar {
  position: sticky; top: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
}

When to use it

Good for: hero stat cards, overlays, sticky navbars, pricing highlights. Avoid for: long text content, forms on busy backgrounds.

See web design trends explained for when trends help and when they don't.

FAQs

Is glassmorphism still in style?

As an accent, yes. As the whole design language, it can feel dated and hurt readability.

Does backdrop-filter work on iPhones?

Yes, with the -webkit- prefix on Safari versions that need it.

Joboo Web adds modern effects like this without sacrificing speed. See our work.