glassmorphism

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:

1. Frost — backdrop-filter: blur() plus saturate() to keep backdrop color vivid through the blur.
2. Translucency — a background with alpha (~0.08–0.18), never fully opaque, never fully clear.
3. Edge of glass — a hairline border brighter than the fill, ideally a lit top-left → dim bottom-right highlight, so the rim catches light.
4. Depth — layered box-shadow: an ambient drop shadow to float it, plus an inset top highlight and bottom shade to round the surface.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari needs the prefix */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),     /* float */
    inset 0 1px 0 rgba(255, 255, 255, 0.35), /* top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);      /* bottom shade */
}

Frost tiers: light UI chrome blur(8–12px) / alpha 0.08–0.14; heavy modal/login blur(24–40px) / alpha 0.10–0.18. Dark glass: fill rgba(0,0,0,0.3), softer top highlight.