TLDR Design · MISCELLANEOUS

LIQUID GLASS, BUT IN CSS

atlaspuplabs.com14 min read

Summary from the TLDR Design newsletter

A developer analyzed Apple's new Liquid Glass effect by breaking it down into layered CSS and SVG techniques, including inset shadows for edge highlights, `backdrop-filter` for blur and color adjustment, and custom SVG filters for light refraction, ripple distortion, and chromatic aberration. While the effect can be convincingly replicated with modern CSS and SVG, it's not fully supported across browsers like Safari or Firefox, and its high GPU cost limits its use to select UI elements rather than full interfaces.