What Is Glassmorphism?
Glassmorphism is a UI design style characterized by:
- A semi-transparent background with frosted blur
- A subtle border visible against the blurred background
- A colorful, vibrant backdrop that shows through
It was popularized by Apple's macOS Big Sur in 2020 and has since spread throughout web UI design.
The Four CSS Properties That Create the Effect
1. backdrop-filter: blur()
This is the core property. It applies a blur effect to everything behind the element, creating the frosted glass illusion:
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); /* Safari */Values between 8px and 24px produce the best results. Below 8px looks too sharp; above 24px looks muddy.
2. Semi-transparent background
The element itself needs a translucent background so the blurred content shows through:
background: rgba(255, 255, 255, 0.12); /* Light glass */
/* or for dark glass: */
background: rgba(0, 0, 0, 0.25);3. Subtle border
A thin, semi-transparent white border defines the glass edge against the background — this is what makes it look physically real:
border: 1px solid rgba(255, 255, 255, 0.2);4. Border radius
Glassmorphism almost always uses rounded corners. They soften the element and reinforce the "physical material" feeling:
border-radius: 16px;The Complete Glassmorphism Card
.glass-card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
padding: 1.5rem;
}Critical Requirement: You Need a Colorful Background
Glassmorphism only works when there's something interesting blurring behind the element. On a white or solid dark background, backdrop-filter: blur() has zero visible effect. You need:
- A colorful gradient background
- Background blobs or shapes
- A photograph or illustration
/* Parent container needs a rich background */
.glass-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* or with floating blobs */
position: relative;
overflow: hidden;
}Dark Mode Glassmorphism
For dark interfaces, increase the white alpha slightly and add a colored tint:
.glass-card--dark {
background: rgba(15, 15, 30, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}Performance Considerations
backdrop-filter triggers compositing and can be expensive on low-end devices. Avoid using it on many simultaneous elements or elements that animate. Use will-change: backdrop-filter sparingly — only right before an animation begins.
Browser Support
As of 2026, backdrop-filter has 97%+ global browser support. The -webkit- prefix is still needed for Safari. You can safely use it in production with a graceful fallback for the rare unsupported case:
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background: rgba(255, 255, 255, 0.85);
}
}Real-World Glassmorphism Components
Knowing the properties is one thing — knowing how to apply them to actual UI components is another. Here are the three most common implementations.
Glassmorphism Navigation Bar
A sticky nav that stays readable as users scroll over rich content:
.glass-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(5, 5, 8, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 2rem;
height: 64px;
display: flex;
align-items: center;
}The dark background tint (rgba(5,5,8,0.6)) ensures text in the nav remains legible regardless of what content scrolls behind it.
Glassmorphism Login Card
A centered auth form that floats over a gradient background:
.glass-login {
width: 100%;
max-width: 420px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
padding: 2.5rem;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}The inset box-shadow on the top edge simulates the light catching the glass rim — a subtle touch that elevates the realism significantly.
Glassmorphism Modal / Dialog
.glass-modal {
background: rgba(15, 15, 25, 0.75);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
max-width: 560px;
width: calc(100% - 2rem);
}
/* Scrim / backdrop */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}Glassmorphism with CSS Variables (Design Token System)
When you use glassmorphism across multiple components, inconsistency becomes a problem. Define your glass values as CSS custom properties so every component stays in sync:
:root {
--glass-bg: rgba(255, 255, 255, 0.10);
--glass-bg-dark: rgba(15, 15, 25, 0.65);
--glass-blur: 20px;
--glass-border: rgba(255, 255, 255, 0.15);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
--glass-radius: 16px;
}
.glass {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow);
}
/* Dark variant */
.glass-dark {
background: var(--glass-bg-dark);
}Common Glassmorphism Mistakes
1. Using it on a solid background
This is the most common mistake. On a flat solid color, backdrop-filter: blur() has zero visible effect — the "glass" just looks like a semi-transparent rectangle. Always ensure there's visual complexity behind your glass element.
2. Blur value too high
Values above 30px start to look smeared rather than frosted. 12px–24px is the sweet spot. Beyond that, you lose the sense of seeing "through" the material.
3. Skipping the border
The border is what sells the illusion of a physical glass edge. Without it, a glass card looks flat and undefined. Even 1px solid rgba(255,255,255,0.15) makes a massive difference.
4. Forgetting -webkit-backdrop-filter
Safari still requires the -webkit- prefix. Without it, Safari users see no blur effect at all — a significant portion of mobile and desktop users.
5. Overusing it on every element
Glassmorphism works through contrast with solid surroundings. If every element on the page is glass, nothing feels like glass — it just looks blurry and confusing. Reserve it for 1–3 key UI elements per view.
6. Ignoring accessibility
Semi-transparent backgrounds change the effective contrast of text layered on top of varying content. Always test text contrast against both the lightest and darkest backgrounds that could appear behind the glass element. Use the Contrast Checker to verify your values pass WCAG AA.
Frequently Asked Questions
Does glassmorphism hurt performance?
On modern devices (2020+), a single glass element is imperceptible in terms of performance. Problems arise when you apply backdrop-filter to many simultaneous elements, or animate it on every frame. Use it intentionally — not as a universal style for every card on the page.
Can I use glassmorphism without a gradient background?
Yes, but you need some visual complexity behind it. A photograph, a pattern, blurred blob shapes, or even another busy UI element will all work. The key is that there must be something interesting for the blur to reveal.
How do I create glassmorphism blobs / shapes behind the card?
Use absolutely-positioned div elements with border-radius: 50%, vivid background colors, and heavy blur via filter: blur(80px). Place them inside the container behind the glass element using z-index. The Glassmorphism Generator generates these automatically.
Is glassmorphism still trendy in 2026?
It's moved from trend to technique. Like flat design or material design before it, glassmorphism has been absorbed into the vocabulary of modern UI — used selectively for overlays, navbars, cards, and modals in dark-themed interfaces, rather than applied wholesale to entire layouts.