Liquid Glass in the Browser: Refraction with CSS and SVG

Summary

#Introduction 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. 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: n1sin⁡(θ1)=n2sin⁡(θ2)n_1 \sin(\theta_1) = n_2 \sin(\theta_2)n1​sin(θ1​)=n2​sin(θ2​) n1=refractive index of first mediumn_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 incidencen2=refractive index of second mediumn_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 In the above interactive diagram, you can see that: When n2=n1n_2 = n_1n2​=n1​, the light ray passes straight through without bending. When n2>n1n_2 > n_1n2​>n1​, the ray bends toward the normal (the imaginary line perpendicular to the surface). When n2<n1n_2 < n_1n2​<n1​, the ray bends away from the normal, and depending on the angle of inc...