A translucent, refractive design language where every surface reflects, refracts, and responds to its environment — built on backdrop blur, specular highlights, and fluid depth.
Typography
Precision-etched labels on a glass surface — geometric sans-serifs optimized for legibility over refractive backgrounds
Display / Plus Jakarta Sans 700
Light Through Glass
Heading / Plus Jakarta Sans 600
Refractive Surfaces
Subhead / Sora 600
Depth & Translucency
Body / Inter 400
Clean, highly legible body text that remains sharp against translucent surfaces. The glass provides visual richness, so type stays quiet and refined.
Caption / DM Sans 400
Secondary metadata, timestamps, and auxiliary information rendered in a compact, readable size.
Label / Inter 500 Uppercase
Interface Labels & Controls
Plus Jakarta Sans + Inter
Clean, modern, Apple-adjacent warmth
Sora + Figtree
Bold display meets friendly readability
Inter 700 + DM Sans
Unified system, engineering-forward precision
Color Palette
Neutral, cool-toned backgrounds with system accent colors — the glass itself provides the visual richness
Components
Translucent panels that float above the background, refracting and reflecting their environment
Glass surfaces stack in space, each layer refracting what lies beneath to create a natural sense of physical hierarchy and spatial ordering.
Layout DepthSpecular highlights shift as users interact, creating the sensation of a real material responding to a coherent light source above.
Animation SpecularGlass opacity and tint adjust automatically between light and dark contexts, ensuring readability without sacrificing the material effect.
A11y AdaptiveTransitions between states feel like physical transformations of the glass material — morphing and flowing, never snapping or switching.
Transition MotionEach glass panel samples its surroundings through backdrop-filter, making every instance visually unique to its placement on the page.
Backdrop ContextTinted glass modes increase opacity for enhanced legibility, ensuring the aesthetic never compromises usability or WCAG compliance.
WCAG TintedVisual Effects
All the refractive, specular, and translucent effects — no image assets needed
The foundational Liquid Glass effect — backdrop-filter blur with saturation boost and specular border.
A light band sweeps across the glass surface, simulating dynamic specular highlights.
A slowly rotating conic gradient simulates the lensing distortion of real glass.
Inner box-shadows with color simulate light trapped within the glass material itself.
Overlapping radial gradients create the colorful substrate that glass refracts against.
Stacked glass panels at increasing blur intensities establish spatial Z-axis hierarchy.
Interactive Elements
Pill-shaped glass controls with specular highlights and fluid hover states
Liquid Glass reclaims depth and dimensionality without returning to skeuomorphic metaphors — surfaces feel tangible and physically present through refraction, shadow, and highlight, yet remain unmistakably digital.— The Liquid Glass Design Philosophy
Bring the depth, light, and fluidity of Liquid Glass to your next web project — every surface refracts, reflects, and responds.