How to Create Glassmorphism Effects in CSS
Glassmorphism is a UI design trend that creates frosted glass effects — semi-transparent surfaces that blur the content behind them. Apple popularized it in macOS Big Sur and iOS, and it's now widely used in modern web interfaces for cards, modals, sidebars, and navigation bars.
- Build frosted glass UI elements with CSS backdrop-filter, background blur, and semi-transparent layers.
- The Basic Glass Effect.
- Covers tuning the effect.
- Covers glassmorphism on dark vs light backgrounds.
- Covers performance and accessibility.
The Basic Glass Effect
The core of glassmorphism is three CSS properties working together:
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
backdrop-filter: blur() blurs everything behind the element. The semi-transparent background adds a tinted layer on top of the blur. The subtle border defines the edge and catches light — without it, glass elements blend into their surroundings.
Tuning the Effect
Three variables control the glassmorphism feel: blur radius, background opacity, and border opacity. Higher blur (20–40px) creates a more frosted, opaque look. Lower blur (8–12px) creates a subtle, barely-there effect. Background opacity between 0.03–0.10 works for dark themes; 0.3–0.6 for light themes. The border should be barely visible (0.06–0.15 opacity) — too prominent and it looks like a regular bordered card.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.Glassmorphism on Dark vs Light Backgrounds
On dark backgrounds (common in dashboards and portfolios), use white-tinted glass: rgba(255,255,255,0.05). On light backgrounds, use dark-tinted glass: rgba(0,0,0,0.02) with a white border. The effect works best when there's colorful or textured content behind the glass element — gradient backgrounds, images, or overlapping UI elements. On a flat, solid-color background, the blur has nothing to blur, and the effect falls flat.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.Performance and Accessibility
backdrop-filter triggers compositing on every frame during scrolling, which can cause jank on low-powered devices. Test on real mobile hardware before committing to the effect on large or frequently-scrolled elements. For accessibility, ensure text on glass surfaces meets WCAG contrast requirements — the semi-transparent background can reduce contrast below acceptable levels depending on what's behind it. Test with worst-case backgrounds using the Contrast Checker. The Glassmorphism Generator lets you adjust blur, opacity, and border and preview the result against different backgrounds.
Frequently Asked Questions
What CSS property creates the glassmorphism effect?
Does glassmorphism work in all browsers?
Is glassmorphism accessible?
Use the Glassmorphism Generator — free, no signup required.
⚡ Open Glassmorphism Generator