Half-transparent panels, backdrop blur, and luminous edges create a modern depth that feels like frosted glass catching light.
Glassmorphism requires a rich gradient background. The glass effect only emerges when there is something vibrant behind it to blur and refract.
Two transparent glass layers and four gradient accent colors compose the entire palette. With glassmorphism, the transparency is the color.
Recommended gradient combinations
Every component is a glass panel. Half-transparent, blurred, bordered with luminous edges. Hover triggers an optical glint sweep across the surface.
Primary — Glass button with optical glint
Size variants
State variants
Four named interaction rules define how glassmorphism elements behave. Interact with each demo to feel the optical physics in action.
A tilted gradient highlight sweeps once across the glass surface, simulating light refraction through a real pane of glass. Never loops — single pass only.
-translate-x-[140%] skew-x-[-24deg]
group-hover:translate-x-[140%] duration-700Click the button to see the Optical Glint animation
Hover lifts the element with a slight translateY and expands the shadow, simulating the panel floating closer to the viewer through the glass layers.
hover:-translate-y-0.5 to hover:-translate-y-2
shadow expands proportionally with liftHover each panel to see depth lift
Border opacity increases from white/20 to white/70+ on interaction, simulating a glass edge catching direct light. Paired with a white glow shadow.
border-white/20 → border-white/45 → white/72
box-shadow glow expands with border brightnessSwitch levels to see border brightness change
All transitions use duration-300 with ease-out for silky optical changes. Opacity shifts feel like light passing through — never abrupt.
transition-all duration-300 ease-out
bg-white/{opacity} — drag slider to see liveGlassmorphism is built from four stacked layers. Click each tab to see what each layer contributes to the final frosted glass effect.
Gradient Background
The colorful foundation
Rich multi-stop gradient forms the colorful foundation. Without this layer, there is nothing for the blur to sample — the glass effect collapses.
bg-gradient-to-br from-[#667eea] via-[#764ba2] to-[#f093fb]Three real-world patterns showing glassmorphism applied to login, weather, and analytics UI. All panels use backdrop-blur over the gradient.
Glassmorphism has strict requirements. Breaking these rules destroys the illusion — the effect collapses into muddy, unreadable transparency.
Four core principles from iOS and macOS design language define how glassmorphism creates spatial depth without physical weight.
Depth without opacity
Layers are distinguished by their transparency level. Front panels use bg-white/20, back panels bg-white/10. The closer a panel is to the viewer, the more defined its glass properties.
bg-white/10 → bg-white/20 → bg-white/30Blur creates premium
backdrop-blur-md and backdrop-blur-xl signal quality and modernity. The blurred background beneath each panel implies depth and the sense that you are floating above rich content.
backdrop-blur-md, backdrop-blur-xlTransparency reduces weight
Semi-transparent elements feel lighter than their opaque counterparts. The eye perceives them as floating rather than sitting — creating an airy, modern interface feel.
shadow-[0_8px_32px_rgba(0,0,0,0.1)]Soft shadows add dimension
Soft diffuse shadows without hard edges create the final dimension. The shadow tells the eye that the panel exists above the background — it is floating in three-dimensional space.
shadow-lg, shadow-xl, shadow-2xlLayer architecture — required stacking order