Glass
morphism
A UI aesthetic that simulates frosted glass - translucent surfaces with backdrop blur set against vibrant, colorful backgrounds. Depth is created not through shadows, but through layers of transparency and refracted light.
Translucent Surface
Background blur creates a frosted glass effect - the colorful world behind bleeds through.
Z-axis Through Blur
Stacking glass panels at different blur intensities conveys hierarchy without shadows.
Needs a Vivid Backdrop
Glassmorphism only works when placed over rich, colorful backgrounds or imagery.
How It Works
Backdrop Blur
The CSS backdrop-filter: blur() property blurs everything rendered behind the element, creating the frosted appearance.
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);RGBA Transparency
Surfaces use semi-transparent backgrounds - typically 8–20% white opacity - allowing the blurred background to show through.
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);Vivid Background
The technique requires a colorful, high-contrast backdrop. Multi-point gradient meshes or photography work best.
background: radial-gradient(
ellipse at 20%, #7C3AED55,
transparent 50%);Transparency Spectrum
UI Components
Navigation Patterns
Card Patterns
Alex Morgan
Notifications
Mark all readNew comment on your post
Sarah left a reply on "Glassmorphism Trends"
Design file shared
Alex shared "UI Kit v3.0" with you
Mentioned in thread
Jamie tagged you in a conversation
Everything you need
Full Application Layout
Overview
Core Principles
Blur as Depth
Use backdrop-filter blur to create perceived distance between layers. More blur = more depth between the surface and what's behind it.
Restraint in Opacity
Keep backgrounds at 8–18% opacity. Too opaque loses the glass effect; too transparent loses readability. The sweet spot is everything.
Top-Edge Highlight
A single-pixel top border gradient from semi-transparent white simulates a light source catching the glass edge. Subtle but essential.
Invest in Backgrounds
Without a rich, colorful backdrop, glass surfaces look empty. Multi-point gradient meshes and photography are the foundation of the aesthetic.