High blur, saturated refraction, inner luminance, and chromatic edges. Glass that feels alive.
Liquid Glass requires a rich gradient foundation. 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. With Liquid Glass, the transparency is the color.
Every component is a glass panel with inner luminance, multi-layer shadows, and specular sweep on interaction.
Primary with inner luminance + specular sweep
Size variants
Liquid Glass is built from four distinct layers. Each one is essential. Remove any layer and the illusion breaks.
Adjust opacity and blur to see how Liquid Glass responds. The sweet spot is 10-20% opacity with 40-60px blur.
bg-white/15
backdrop-blur-[60px]
backdrop-saturate-[180%]
border border-white/20
shadow-[0_8px_32px_rgba(0,0,0,0.12),
inset_0_1px_0_rgba(255,255,255,0.35)]
Adjust the sliders to see changes in real time.
High blur + saturation boost makes background colors live inside the glass. The glass doesn't just sit on top, it refracts.
A top-down white gradient simulates light hitting the glass surface from above. This is what separates flat translucency from real glass.
Multiple glass layers with varying opacity and blur create true spatial depth. Each layer samples the one below it.
Borders reveal subtle luminance changes on interaction. The edge of glass catches light differently than its surface.
Spring easing (cubic-bezier 0.16,1,0.3,1) simulates the physical inertia of glass. Nothing snaps, everything flows.
A single skewed highlight sweeps across the surface on hover, simulating a light source moving across polished glass.