Design
Liquid Glass on the web: bringing Apple’s design language to browsers
· 6 min read · SAYEMANS Studio
Translucency, depth and fluid motion. What works in CSS today, and where to hold back.
Apple’s Liquid Glass material redefined interfaces across iOS, iPadOS and macOS 26. Its translucent, light-refracting surfaces create hierarchy without heavy borders. Naturally, clients now ask for the same feeling on the web.
The building blocks
Modern CSS gets you surprisingly far: backdrop-filter for blur and saturation, layered gradients for specular highlights, and inset shadows for the glass edge. In Chromium, an SVG displacement filter adds real refraction.
Legibility first
Glass is a material for controls and navigation, not for long-form text. Keep content on solid surfaces, ensure WCAG contrast over any background, and honour the “reduce transparency” and “reduce motion” preferences.
Motion with meaning
Apple-style motion uses springs, not linear easing. Elements respond to scroll and pointer with physical inertia. Used sparingly, it makes a site feel alive. Overused, it feels like a demo reel.