You know that frosted glass look — the one where a card seems to float over a blurred background, like you're peering through a window on a cold morning? That's glassmorphism. It showed up everywhere around 2020 (Apple's macOS Big Sur made it impossible to ignore), and it hasn't gone away. If anything, it's become a staple in modern UI design alongside flat design and neumorphism.
The good news: you can build it with just a few CSS properties. The tricky part is getting the balance right so it actually looks like glass and not just a washed-out box.
What makes glassmorphism work
Glassmorphism relies on four things working together:
- A semi-transparent background — usually white or a light color with low opacity
- A backdrop blur — the
backdrop-filter: blur()property that frosts whatever sits behind the element - A subtle border — often a thin, semi-transparent white or light border that mimics the edge refraction of real glass
- Something interesting behind it — a gradient, image, or colorful background that the blur can actually act on
Strip away any one of these and the illusion falls apart. A blurred element over a plain white background? It just looks like a slightly transparent div. The background content is what gives the frosted effect its depth.
The CSS you need
Here's a basic glassmorphism card:
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
That's the foundation. Five lines of CSS and you've got a glass effect. But those specific values matter more than you'd think.
Background opacity
The rgba alpha value controls how much of the background color shows through. Lower values (0.05–0.15) give you a more transparent, airy feel. Higher values (0.25–0.4) make the card more opaque and readable but less "glassy."
For dark-themed glass, flip the base color:
background: rgba(0, 0, 0, 0.25);
Dark glass over a colorful background can look striking — think of a music player overlay or a notification panel.
Blur intensity
The blur() value is where most people either go too subtle or way overboard. Here's a rough guide:
- 4–8px — light frosting, background shapes still partially visible
- 10–16px — the sweet spot for most UI cards
- 20px+ — heavy blur, background becomes abstract color blobs
Start at 12px and adjust from there. And don't forget the -webkit-backdrop-filter prefix — Safari still needs it.
The border trick
That thin semi-transparent border does more than you'd expect. It creates a rim-light effect that separates the glass element from its background. Without it, the card edges blend into the backdrop and the whole thing looks flat.
Some designers add a second visual cue with an inner box shadow:
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
This adds a soft drop shadow that lifts the card off the page. Combined with the border, it sells the floating-glass illusion.
Building it visually
Writing these values by hand means a lot of save-reload-tweak cycles. It's much faster to use the Glassmorphism Generator — you can drag sliders for blur, opacity, and border settings while watching a live preview. When the effect looks right, copy the CSS and drop it into your project.
This is especially helpful when you're experimenting with different background colors or trying to match a specific design mockup. Eyeballing rgba(255, 255, 255, 0.18) versus 0.22 is nearly impossible without seeing it in context.
Glassmorphism vs. neumorphism
These two trends often get mentioned together, but they're solving different design problems.
Glassmorphism creates depth through transparency and blur. Elements float above the background. It works best when there's visual content behind the glass — gradients, images, or other UI elements.
Neumorphism creates depth through light and shadow on a flat surface. Elements look pressed into or extruded from the background, like soft clay. It works on solid-color backgrounds and doesn't use transparency at all.
You can experiment with both styles side by side — try the Neumorphism Generator to see how the soft-shadow approach compares. Many modern designs actually mix both: neumorphic buttons sitting on a glassmorphic card, for example.
Common mistakes to watch for
No background content. Glassmorphism over a plain white or solid-color background is pointless. You need something behind the glass for the blur to act on — a gradient, a mesh pattern, overlapping shapes, or an image.
Too much blur on text-heavy elements. If your glass card contains body text, keep the background opacity high enough that the text stays readable. Run a contrast check. A gorgeous frosted card is useless if nobody can read what's on it.
Forgetting mobile performance. backdrop-filter can be expensive on lower-end devices. A full-page blur behind a navigation overlay might cause visible lag on budget phones. Test on real devices, not just your development machine.
Stacking blurred elements. When two glassmorphic elements overlap, the blur compounds and things get weird. The intersection area becomes extra blurry and the borders interact unpredictably. Keep your glass layers from overlapping, or accept that the stacking area will look different.
Browser support
backdrop-filter has strong browser support in 2026. Chrome, Edge, Safari, and Firefox all handle it. The one gotcha is that Safari still requires the -webkit- prefix in some versions, so always include both:
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
For the rare browser that doesn't support it, the element will render with just the semi-transparent background — no blur. That's actually a decent fallback. The card still looks intentional, just not as fancy.
Practical use cases
Where does glassmorphism actually work well in real projects?
- Navigation bars — a frosted nav that blurs page content as you scroll beneath it
- Modal overlays — glass dialogs feel lighter and more modern than solid white boxes
- Feature cards — floating over a hero gradient to highlight key selling points
- Login forms — a glass panel over a full-bleed background image
- Dashboard widgets — especially over data visualizations or maps
Where it doesn't work well: dense data tables, long-form text content, or anywhere readability is the top priority. Glass effects are accent pieces, not workhorse containers.
Making it accessible
Transparency and blur look great but can create real accessibility issues. Keep these in mind:
- Contrast ratios still apply. Just because the design looks trendy doesn't exempt you from WCAG guidelines. Test your text colors against the effective background (the blurred result, not the transparent layer alone).
- Reduce motion preferences. If you're animating the background behind the glass, respect
prefers-reduced-motionand offer a static alternative. - Don't rely on the glass effect for meaning. If the frosted appearance is the only thing distinguishing an active state from an inactive one, some users won't see the difference.
Quick recipe to get started
Here's a minimal HTML + CSS setup you can paste into any project:
<div class="glass-container">
<div class="glass-card">
<h2>Hello, glass</h2>
<p>This card floats over the gradient.</p>
</div>
</div>
.glass-container {
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
max-width: 400px;
color: white;
}
That gets you a working glass card in under a minute. From there, tweak the opacity, blur, and border values until it fits your design. Or skip the guessing entirely and build it with the Glassmorphism Generator — adjust everything visually and export the code when you're happy with it.
FAQ
Does glassmorphism work in dark mode?
Yes, and it can look even better. Swap the white-based rgba for a dark one (rgba(0, 0, 0, 0.3)) and use a lighter border (rgba(255, 255, 255, 0.1)). The frosted effect over dark gradients creates a moody, polished look.
Is backdrop-filter bad for performance?
It can be on older devices. Each blurred layer requires the browser to composite and re-render the area behind it. For a single card or navbar, you won't notice any slowdown. Stacking multiple blurred layers on a page with heavy animations might cause jank on budget hardware. Test and profile if you're concerned.
Can I combine glassmorphism with other design styles?
Absolutely. Glassmorphic cards over a neumorphic background, glass navigation bars on an otherwise flat-design page, frosted modals in a brutalist layout — mixing styles is how you keep a design feeling fresh rather than formulaic. Check out the Neumorphism Generator if you want to try blending the two approaches.