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) n1sin(θ1)=n2sin(θ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
θ 1 θ 1 θ 2 First Medium n 1 = 1 Second Medium n 2 = 1.5 Normal 0.01 3 n 2 1.5
In the above interactive diagram, you can see that:
When n 2 = n 1 n_2 = n_1 n2=n1, the light ray passes straight through without bending.
When n 2 > n 1 n_2 > n_1 n2>n1, the ray bends toward the normal (the imaginary line perpendicular to the surface).
When n 2 < n 1 n_2 < n_1 n2 1 index > 1 index>1, and prefer 1.5 1.5 1.5 (glass).
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.
Under these assumptions every ray we manipulate has a well-defined refracted direction via Snell's Law, and we simplify a lot our calculations.
#Creating the Glass Surface
To create our glass effect, we need to define the shape of our virtual glass surface. Think of this like describing the cross-section of a lens or curved glass panel.
#Surface Function
Our glass surface is described by a mathematical function that defines how thick the glass is at any point from its edge to the end of the bezel. This surface function takes a value between 0 0 0 (at the outer edge) and 1 1 1 (end of bezel, start of flat surface) and returns the height of the glass at that point.
const height = f ( distanceFromSide );
From the height we can calculate the angle of incidence, which is the angle between the incoming ray and the normal to the surface at that point. The normal is simply the derivative of the height function at that point, rotated by − 90 -90 −90 degrees:
const delta = 0.001 ; // Small value to approximate derivative const y1 = f ( distanceFromSide - delta ); const y2 = f ( distanceFromSide + delta ); const derivative = ( y2 - y1 ) / ( 2 * delta ); const normal = { x: - derivative , y: 1 }; // Derivative, rotated by -90 degrees
For this article, we will use four different height functions to demonstrate the effect of the surface shape on the refraction:
Convex Circle y = ( 1 − ( 1 − x ) ) 2 y = \sqrt{(1 - (1 - x)) ^ 2} y = ( 1 − ( 1 − x ) ) 2 Simple circular arc → a spherical dome. Easier than the squircle, but the transition to the flat interior is harsher, producing sharper refraction edges—more noticeable when the shape is stretched away from a true circle. Convex Squircle y = ( 1 − ( 1 − x ) ) 4 4 y = \sqrt[4]{(1 - (1 - x)) ^ 4} y = 4 ( 1 − ( 1 − x ) ) 4 Uses the Squircle Apple favors: a softer flat→curve transition that keeps refraction gradients smooth even when stretched into rectangles—no harsh interior edges. It also makes the bezel appear optically thinner than its physical size because the flatter outer zones bend light less. Concave y = 1 − Convex ( x ) y = 1 - \text{Convex}(x) y = 1 − Convex ( x ) The concave surface is the complement of the convex function, creating a bowl-like depression. This surface causes light rays to diverge outward, displacing them beyond the glass boundaries. Lip y = mix ( Convex ( x ) , Concave ( x ) , Smootherstep ( x ) ) y = \text{mix}(\text{Convex}(x), \text{Concave}(x), \text{Smootherstep}(x)) y=mix(Convex(x),Concave(x),Smootherstep(x)) Blends convex and concave via Smootherstep: raised rim, shallow center dip.
We could make the surface function more complex by adding more parameters, but these four already give a good idea of how the surface shape affects the refraction.
Now let's see these surface functions in action through interactive ray tracing simulations. The following visualization demonstrates how light rays behave differently as they pass through each surface type, helping us understand the practical implications of our mathematical choices.
Glass Background
From the simulation, we can see that concave surfaces push rays outside the glass; convex surfaces keep them inside.
We want to avoid outside displacement because it requires sampling background beyond the object. Apple’s Liquid Glass appears to favor convex profiles (except for the Switch component, covered later).
The background arrow indicates displacement—how far a ray lands compared to where it would have landed without glass. Color encodes magnitude (longer → more purple).
Take a look at symmetry: rays at the same distance from the border share the same displacement magnitude on each side. Compute once, reuse around the bezel/object.
#Displacement Vector Field
Now that calculated the displacement at a distance from border, let's calculate the displacement vector field for the entire glass surface.
The vector field describes at every position on the glass surface how much the light ray is displaced from its original position, and in which direction. In a circle, this displacement is always orthogonal to the border.
#Pre-calculating the displacement magnitude
Because we saw that this displacement magnitude is symmetric around the bezel, we can pre-calculate it for a range of distances from the border, on a single radius.
This allows us to calculate everything in two dimensions once (x and z axis), on one "half-slice" of the object, and we will the rotate these pre-calculated displacements around the z-axis.
The actual number of samples we need to do on a radius is of 127 ray simulations, and is determined by the constraints of the SVG Displacement Map resolution. (See next section.)
#Normalizing vectors
In the above diagram, the arrows are all scaled down for visibility, so they do not overlap. This is normalization, and is also useful from a technical standpoint.
To use these vectors in a displacement map, we need to normalize them. Normalization means scaling the vectors so that their maximum magnitude is 1 1 1, which allows us to represent them in a fixed range.
So we calculate the maximum displacement magnitude in our pre-calculated array:
const maximumDisplacement = Math . max ( ... displacementMagnitudes );
And we divide each vector's magnitude by this maximum:
displacementVector_normalized = { angle: normalAtBorder , magnitude: magnitude / maximumDisplacement , };
We store maximumDisplacement as we will need it to re-scale the displacement map back to the actual magnitudes.
#SVG Displacement Map
Now we need to translate our mathematical refraction calculations into something the browser can actually render. We'll use SVG displacement maps.
A displacement map is simply an image where each pixel's color tells the browser how far it should find the actual pixel value from its current position.
SVG's