Is Glassmorphism Still Cool? (The Ultimate CSS Guide)

Every year, Dribbble decides a design trend is "dead."

In 2021, they said Gradients were over. In 2022, Dark Mode was "passé." In 2023, Glassmorphism had a funeral.

And yet...

I'm looking at the latest macOS control center. Glass.

I'm looking at Windows 11's taskbar. Glass.

I'm looking at half the fintech apps on my phone. Glass, glass, glass.

So is it dead, or are people just doing it badly?

What Even Is Glassmorphism?

It's not just transparency. If you set opacity: 0.5, that's not glass. That's just a ghost div.

Real glassmorphism requires blur.

The magic is in backdrop-filter: blur(). It blurs whatever is behind the element, not the element itself. It creates the illusion of looking through frosted glass.

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);

That subtle white border is key. Without it, the glass looks like a smudge.

Why Most Glass Effects Look Terrible

I've seen so many bad glass cards. Here's why they fail:

1. Too much blur. If your blur is like 50px, the thing behind the card is unrecognizable mush. Keep it subtle. 8-15px is the sweet spot.

2. No contrast. You put glass on a solid white background. There's nothing to blur. Glass only makes sense when there's something interesting behind it—an image, a gradient, textures.

3. Dark backgrounds, light glass. This never works. If the background is dark, your glass overlay needs to be dark too (rgba(0,0,0,0.3)). Otherwise it looks dirty.

Browser Support Is Fine Now

In 2020, backdrop-filter was spotty. Firefox was weird about it. That's not true anymore.

As of 2025, global support is over 95%. Use it.

The only thing to watch for: older Samsung browsers sometimes need the -webkit- prefix. That's it.

I Got Tired of Tweaking Numbers

Getting the rgba() and blur() values right is annoying. Every time I changed the background, the glass looked wrong again.

So I built the Axonix Glassmorphism Generator.

You adjust sliders. You see a live preview. You copy the CSS. You move on.

When to Use Glass (And When Not To)

DO use it for:

• Modal overlays. A blurred background behind a login form looks slick.
• Navigation bars. Apple does this constantly. It works.
• Hero sections. Overlay text on a blurred image hero. Cinematic.

DON'T use it for:

• Data tables. Nobody wants to squint through blur to read numbers.
• Entire dashboards. It becomes exhausting.

Performance Note

backdrop-filter is GPU-intensive. If you have too many glass elements stacked on top of each other, your frame rate will tank on mobile devices. Use it once or twice per screen, not on every card. Your users' battery life will thank you.

Glass is an accent. Treat it like hot sauce. A little bit makes things interesting. Too much, and you ruin the meal.