Glassmorphism
Translucent, frosted-glass surfaces floating above vivid, colorful backgrounds. Depth through blur. Hierarchy through transparency.
The Frosted Glass Aesthetic
Glassmorphism is a UI design aesthetic built around translucent, frosted-glass surfaces that float above vivid, colorful backgrounds. The effect creates depth and visual hierarchy through semi-transparent elements with background blur, mimicking the look of frosted or etched glass. It emerged as a dominant interface trend following Apple's macOS Big Sur (2020) and Microsoft's Fluent Design System, and has since become a staple of modern dashboard, card, and overlay design.
Defining Properties
The visual language of glassmorphism is built on seven key characteristics that work together to create the frosted glass illusion.
Frosted Glass Panels
Semi-transparent surfaces with Gaussian background blur that allow underlying content to show through in a softened, diffused way.
Depth Through Layering
UI elements appear to float above the background rather than being embedded in a flat plane; multiple glass layers can stack to create parallax-like depth.
Matte Finish
Modern glassmorphism avoids glossy reflections in favor of a clean, minimal frosted appearance.
Light Borders
Subtle semi-transparent white strokes along element edges simulate the refraction of light at the edge of real glass.
Soft Shadows
Minimal, diffused drop shadows reinforce the floating sensation without heavy visual weight.
Rounded Corners
Generous border-radius values soften the geometry of glass panels.
Vivid Backgrounds
The effect achieves maximum impact when glass elements sit over colorful gradient backgrounds, photographs, or abstract shapes that accentuate the blur.
The Three Pillars
According to the Nielsen Norman Group framework, glassmorphism requires the interplay of exactly three properties. Without all three, the result is simple transparency rather than glassmorphism.
Reduced Fill Opacity
The background must remain partially visible through the glass surface.
Background Blur
Mandatory blur to maintain text readability over complex backgrounds.
Semi-Transparent Borders
Distinguish element boundaries on both dark and light surfaces.
Surfaces, Borders & Gradients
Glassmorphism relies on layered transparency over vivid gradients. These are the foundational color values.
Glass Surface Colors
Border Colors
Background Gradient Swatches
Example Gradient Combinations
Recommended Fonts
Typeface selections optimized for legibility on translucent glass surfaces, loaded from Google Fonts.
Typography Guidelines
#FFFFFF or rgba(255,255,255,0.90)) on dark/vivid backgrounds.0 1px 2px rgba(0,0,0,0.1)) for improved legibility if needed.#111927) on light glass surfaces for contrast.Spatial Composition
How to organize glass surfaces for maximum depth and visual clarity.
Floating Card Paradigm
Glass panels hover above the background, separated by blur and shadow rather than hard edges.
Generous Spacing
Padding and margins should be ample (24-48px internal padding, 24-32px gaps between cards) to let the frosted effect breathe.
Layered Depth
Stack glass elements at different opacity and blur levels to create a z-axis hierarchy; background layers get heavier blur, foreground layers get lighter blur.
Background Context
Always ensure the background behind glass panels is visually interesting (gradients, images, abstract shapes); glass over a flat white background produces no visible effect.
Centered & Symmetrical
Cards and panels are often centered on the page or arranged in balanced grid layouts.
Limit Glass Surfaces
Do not apply the glass effect to every element; reserve it for primary content cards, modals, navigation bars, and sidebars to maintain visual impact.
Code Snippets
Production-ready CSS patterns for glass surfaces, navigation, buttons, and inputs.
.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.20); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); padding: 32px; color: #ffffff; }
.glass-card-enhanced { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50), inset 0 -1px 0 rgba(255, 255, 255, 0.10); }
.glass-card-dark { background: rgba(17, 25, 40, 0.75); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); color: rgba(255, 255, 255, 0.90); }
.glass-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 16px 32px; }
.glass-button { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 12px 28px; color: #ffffff; transition: all 0.3s ease; } .glass-button:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); }
.glass-input { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 14px 20px; color: #ffffff; outline: none; } .glass-input:focus { border-color: rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.12); }
Tips & Best Practices
Critical guidance for production-quality glassmorphism implementations.
Never use the CSS opacity property on a glass element. It reduces opacity of the entire element including children, breaking the backdrop-filter effect. Always use rgba() for the background property instead.
Always include the -webkit- prefix: backdrop-filter requires -webkit-backdrop-filter for Safari and older WebKit browsers.
Add saturate() to the backdrop-filter for richer color bleed-through: backdrop-filter: blur(12px) saturate(150%).
Test on real devices: backdrop-filter triggers GPU compositing which can affect performance on lower-end mobile hardware. Limit glass panels to key UI surfaces.
Provide fallbacks: For browsers without backdrop-filter support, use @supports to fall back to a solid semi-transparent background.
Blur range: 8-12px produces a subtle frost; 16-24px produces a heavy, diffused frost. Values above 30px rarely add visible improvement and cost performance.
Background matters: If the background behind a glass panel is a flat solid color, the glass effect is invisible. Always pair glass surfaces with gradients, images, or colorful abstract shapes.
Avoid stacking too many blur layers: Each backdrop-filter layer triggers GPU compositing; stacking more than 2-3 layers can cause performance issues on mobile devices.
/* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(12px)) { .glass-card { background: rgba(30, 30, 60, 0.85); } }