Liquid Glass in the Browser: Refraction with CSS and SVG

Liquid Glass in the Browser: Refraction with CSS and SVG

Apple introduced the Liquid Glass effect during WWDC 2025 in June—a stunning UI effect that makes interface elements appear to be made of curved, refractive glass. This article is a hands‑on exploration of how to recreate a similar effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations.

Instead of chasing pixel‑perfect parity, we’ll approximate Liquid Glass, recreating the core refraction and a specular highlight, as a focused proof‑of‑concept you can extend.

We'll build up the effect from first principles, starting with how light bends when passing through different materials.

Chrome‑only demo The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers.

#Understanding Refraction

Refraction is what happens when light changes direction as it passes from one material to another (like from air into glass). This bending occurs because light travels at different speeds through different materials.

The relationship between the incoming and outgoing light angles is described by Snell–Descartes law:

n 1 sin ⁡ ( θ 1 ) = n 2 sin ⁡ ( θ 2 ) n_1 \sin(\theta_1) = n_2 \sin(\theta_2) n1​sin(θ1​)=n2​sin(θ2​)

n 1 = refractive index of first medium n_1 = \text{refractive index of first medium} n1​=refractive index of first medium θ 1 = angle of incidence \theta_1 = \text{angle of incidence} θ1​=angle of incidence n 2 = refractive index of second medium n_2 = \text{refractive index of second medium} n2​=refractive index of second medium θ 2 = angle of refraction \theta_2 = \text{angle of refraction} θ2​=angle of refraction

... continue reading