Liquid Glass in the Browser: Refraction with CSS and SVG

Liquid Glass in the Browser: Refraction with CSS and SVG An in-depth exploration of recreating Apple's Liquid Glass UI effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations. --- Introduction Apple introduced the Liquid Glass effect at WWDC 2025, creating curved, refractive glass-like user interface elements. This article builds an approximation of this effect focusing on refraction and specular highlights. Approach is from first principles: how light bends passing through materials. --- Understanding Refraction Physics Background Refraction bends light rays when transitioning between materials with different refractive indices. Snell-Descartes Law governs this bending: \[ n1 \sin(\theta1) = n2 \sin(\theta2) \] where: \( n1 \): refractive index of first medium (air = 1) \( \theta1 \): angle of incidence \( n2 \): refractive index of second medium (e.g., glass ~1.5) \( \theta2 \): angle of refraction Behavior Observations If \( n2 = n1 \), light passes straight without bending. If \( n2 > n1 \), ray bends toward the surface normal. If \( n2 1 \) (preferably ~1.5 for glass). Only one refraction event considered (ignore second pass). Incident rays orthogonal to background — no perspective. Objects assumed 2D, parallel to background. Circular shapes restricted in the article for simplicity. --- Creating the Glass Surface Surface Function Defines height (thickness) of glass from bezel edge to flat surface. Height ranges from 0 (edge) to 1 (start of flat surface). The surface derivative (rate of change of height) determines the surface normal angle, used to compute angle of incidence for refraction. Example Surface Functions Convex Circle Simple spherical dome. Harsh flat to curve transition; sharper edges visually. Convex Squircle Uses Apple's favored squircle for smooth flat-to-curve gradient. Avoids harsh refraction edges, bezel appears optically thinner. Concave Complement of convex circle; bowl-shaped. Diverges rays beyond glass boundaries. Lip Blend of convex and concave with a raised rim. Gives a shallow center dip. --- Simulation Interactive ray tracing shows light behavior through each surface type. Concave surfaces push rays outside; convex keep rays inside glass. Apple's Liquid Glass favors convex profiles to avoid outside displacements requiring extra background sampling. Displacement magnitude around the bezel is symmetric; pre-calculate once and rotate around. --- Displacement Vector Field Pre-calculating Magnitude Compute displacement magnitudes on a radius in 2D, then rotate around the object. SVG displacement maps limit resolution, needing 127 ray simulations for accuracy. Normalizing Vectors Vectors normalized so maximum magnitude is 1. Normalization helps fit vector magnitudes into 8-bit color channels for SVG filters. --- SVG Displacement Map Concept SVG filter uses RGBA channels as vector displacement. Red channel → X displacement; Green channel → Y displacement. Each channel 8-bit: ranges from -128 to 127 pixels (128 being neutral). Scale Attribute scale multiplies normalized displacement values for real pixel shifts. By using max displacement as scale, the full vector magnitude range is utilized. This scale can be animated to fade effect. Vector to Color Conversion Convert polar displacement vectors (angle, magnitude) to Cartesian (x,y). Remap normalized values [−1,1] to [0,255] for red and green color channels. Blue and alpha channels are ignored or set