Glassmorphism (Frosted & Liquid Glass)

Translucent, frosted UI: panels you can see through, blurred so the backdrop reads as soft color, rimmed by a bright edge of light, floating on layered shadow. The 2026 "liquid glass" evolution adds refraction — the background visibly bends through the panel — plus moving specular highlights. The goal is depth and material, not just opacity.

When to use

• Frosted cards, nav bars, sidebars, modals/dialogs, and toolbars over busy/photo backgrounds
• Login/hero panels and overlays that should feel layered above the page
• Apple-style "liquid glass" heroes: refracting, slowly churning surfaces with a specular sweep
• Hover/scroll/enter motion on glass — frost deepening, highlight brightening, the panel lifting
• Any place where content needs to read as floating glass while staying legible

The four ingredients of believable glass

Glass is never one property. Every panel needs all four, or it reads as a plain translucent box: