What is Glassmorphism? CSS Guide with Code & Examples
Glassmorphism is a UI style that makes elements look like frosted glass: semi-transparent, blurred behind, with a thin border that catches the light. Complete CSS guide with code, real-world examples, browser support, and accessibility.
Published: 2026-04-27
Glassmorphism is a UI style where elements look like frosted glass. They are semi-transparent, blurred behind, with a thin light-catching border. You see what is behind the panel, but softened, as if you were looking through a sheet of frosted glass.
Apple put glassmorphism on the map with macOS Big Sur in late 2020 and iOS 14 the same year. The term itself was coined by designer Michał Malewicz in a viral Medium post around the same time, and the look spread fast through Dribbble, Figma community files, and SaaS landing pages over the next year. By 2026 the trend has matured. The flashy mid-2021 versions (ten stacked layers of blur, neon gradients) have given way to subtler uses: app sidebars, command palettes, modals, toast notifications.
The CSS recipe
The whole effect is four properties:
.glass {
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;
}
Three things are doing the work:
background: rgba() with low alpha (0.1 to 0.25) gives the panel a tint without hiding what is behind it.
backdrop-filter: blur() blurs whatever sits behind the panel. The -webkit- prefix is still required for Safari.
The thin border with low-alpha white catches light at the edge and gives the panel its physical feel.
Drop that on top of a colorful background or photo and you have glassmorphism.
Five real-world examples
Modal overlay on a dimmed page:
.modal {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
Card on a gradient hero, with the signature Big Sur saturation push:
.glass-card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
}
Sticky navbar over scrolling content. Higher alpha keeps text legible, lower blur keeps scroll FPS high:
.navbar {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
Login form floating over a photo background. Same recipe as the modal but with a slight saturation lift to make the photo pop through the panel.
Toast notification in the corner of the screen. Use a smaller blur (8 to 10px) so the toast feels light and disposable, not a full modal.
Light vs dark mode
The recipe inverts cleanly. For dark mode, swap white for near-black and raise the alpha:
.glass-dark {
background: rgba(20, 20, 22, 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
Use 0.4 to 0.6 alpha on dark mode. Pure black with low alpha disappears against most app shells.
Browser support and the Safari prefix
backdrop-filter works in every modern browser as of 2026: Chrome 76+, Firefox 103+, Edge 79+, and Safari 9+ (with prefix). Coverage is around 98% globally on caniuse.
Safari still requires -webkit-backdrop-filter alongside the unprefixed property. Without the prefix, the effect silently fails on every iPhone in production. Always ship both lines.
For Internet Explorer and ancient mobile browsers, fall back with a feature query:
.glass {
background: rgba(255, 255, 255, 0.85); /* solid fallback */
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
}
Performance gotchas
backdrop-filter is expensive. The browser has to render whatever is behind the panel and then blur it on every frame. Three things to watch:
Animating blur radius. Avoid it. Use opacity transitions instead. Blur is not a cheap property to interpolate.
Stacking. Multiple glass panels on top of each other compound the cost. A modal over a glass navbar is two blurs, not one.
Big surfaces. A full-page blur on a phone with many DOM nodes behind it can drop scroll FPS below 30. Test on real hardware, not just your laptop.
If FPS tanks, check whether the blurred element is composited on its own layer (will-change: backdrop-filter or transform: translateZ(0) helps) and whether you actually need blur on a hero-sized surface.
Accessibility
Glassmorphism breaks contrast quickly. Three rules to keep it accessible:
Test contrast on the worst-case background, not the average. WCAG AA asks for 4.5:1 on body text, 3:1 on large text. AAA asks for 7:1 and 4.5:1. A glass panel that passes against your hero gradient may fail against a stock photo.
Respect prefers-reduced-transparency. macOS and iOS users can opt out of transparency at the OS level. Honor it:
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
Provide a non-blur fallback even outside reduced-transparency mode for users on browsers that ignore @supports. A solid color is better than illegible text.
If text on a glass panel only passes contrast against half your possible backgrounds, raise the alpha on the panel or drop the blur on that surface.
Glassmorphism vs neumorphism vs flat
Three lookalike trends keep getting confused:
Flat design. Solid colors, no shadows or depth. Used by most operating systems and SaaS dashboards. Always accessible, never trendy.
Neumorphism (soft UI). Elements look pressed into or popping out of the same-color background, using soft inner and outer shadows. Beautiful in mockups, terrible for accessibility because contrast usually fails.
Glassmorphism. See-through, blurred, layered. Best when there is something interesting behind the panel. Useless on a white wall.
Pick glassmorphism when the surface behind the panel has color, gradient, or photography. Pick flat when it does not. Pick neumorphism only for decorative non-text surfaces.
FAQ
Does glassmorphism work in all browsers?
It works in every modern browser as of 2026 (Chrome, Firefox, Edge, Safari with -webkit- prefix), with global coverage around 98%. Use @supports to fall back to a solid background on older browsers.
Why doesn't my blur show?
Three usual causes: missing -webkit-backdrop-filter prefix on Safari, fully opaque background color hiding the blur, or no background color at all on the element. backdrop-filter needs the element to have at least some translucent fill, otherwise there is nothing to blur through.
Is glassmorphism accessible?
Only if you test contrast on the actual backgrounds it sits over, respect prefers-reduced-transparency, and ship a solid fallback. Without those checks, glassmorphism quietly fails WCAG.
When should I avoid glassmorphism?
On long-form text, on critical form fields, on dashboards with constantly changing data, and any time the background varies wildly. Glass panels need a stable, controlled surface behind them.
CSS or Tailwind?
Either. Tailwind v4 ships utility classes for backdrop-blur-* and bg-white/10 that compose cleanly. Plain CSS gives you finer control over the rgba alpha. The underlying property is identical.
Build it in seconds
Generate a glassmorphic effect with the right blur, alpha, border, and shadow values using our glassmorphism generator, then paste the output into your project. To compare with the soft-UI style side by side, open the neumorphism generator. For the related shadow and filter effects, the box-shadow generator and CSS filter generator cover everything else in this neighborhood. Pair any of them with a colorful gradient or mesh gradient backdrop and the glass effect will actually have something to do.
Last updated: April 2026.
Last updated: 2026-04-27