Glassmorphism in CSS that actually works — Obuobi Ayim DavidFebruary 11, 2025 · 4 min read
NAME
Glassmorphism in CSS that actually works — backdrop-filter is gorgeous until it isn't. Here is how to get frosted glass that stays readable in both light and dark mode.
SYNOPSIS
css-glassmorphism-that-actually-works [CSS, Design]
DESCRIPTION
A glass card is just a semi-transparent background plus a blur. The hard part is keeping text legible when the backdrop behind it is busy.
.landing-card {
backdrop-filter: blur(12px);
background: light-dark(rgba(0,0,0,0.03), rgba(255,255,255,0.04));
border: 1px solid light-dark(rgba(0,0,0,0.07), rgba(255,255,255,0.10));
}- Use light-dark() so the tint flips with the theme automatically.
- Keep the blur subtle (8–14px); too much looks milky.
- Add a hairline border so edges read against any background.
Done right, the card feels like a pane of frosted glass floating over the page — not a gray box.
SEE ALSO