Liquid Glass in the Browser: Refraction with CSS and SVG - kube.io

"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."

"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: In the above interactive diagram, you can see that: To keep things focused we avoid complex branches of behavior by constraining the scenario:"

"Only one refraction event (ignore any later exit / second refraction). Incident rays are always orthogonal to the background plane (no perspective). Objects are 2D shapes parallel to the background (no perspective). No gap between objects and background plane (only one refraction). Circle shapes only in this article: Extending to other shapes requires preliminary calculations. Circles let us form rounded rectangles by stretching the middle."

A Liquid Glass UI effect is recreated on the web by approximating refraction and specular highlights using CSS, SVG displacement maps, and physics-based refraction calculations. The approach simplifies optics using Snell-Descartes law and constrains the scenario to a single refraction event, orthogonal incident rays, 2D shapes parallel to the background, and no gap between object and background. The prototype focuses on circular shapes to simplify surface mathematics and lets circles form rounded rectangles by stretching. The goal is a focused proof-of-concept that captures core refraction behavior rather than pixel-perfect parity.

Read at kube.io