In WWDC25, Apple introduced a new GUI design called Liquid Glass. Regardless of the users reception to Apple's new style, we will try to recreate this effect using shaders.
Since I don't have access to an Apple device, I can't reverse engineer the rendering behind Liquid Glass and know for a fact how it works, but the effect is simple enough that it can be reproduced.
First we need to define the Shape of our UI element, I can be a button or a panel or a even text.
We will use a mathematical function called a Signed Distance Functions, that, given any point in 2D space, returns the distance from that point to our shape.
Here we visualize the SDF of a rounded rectangle using grayscale, the darker the color is the closer the current pixel is to our shape.
You can move aroud the shape by dragging it with the mouse
Now we need to compute the normal of your rounded rectangle so that we can make it interact with light in interesting ways.
To do that we will "fake" the normal of a 3D rounded shape by using the screen space gradient of the SDF on the X and Y axis, and combine it with a normal on the Z axis based on how close it is to the edge of the shape:
We are trying to simulate how light would get refracted by our shape as if it was made of glass. To do that we use Snell's law
Snell's law gives us the angle of refraction of a ray of light passing through a medium, the angle changes depending on the materials Index of Refraction.
Using Fresnel equations we can also compute the amount of light refracted vs reflected by the medium.
The index of refraction of glass is 1.52, for comparison water has an IOR of 1.33.
Here we can visualize the refracted vector that goes from the camera towards the negative Z axis (towards the screen)
If we use this vector to sample a texture behind it, we can start seeing the "glassy" effect:
Some part of the light is reflected off the glass instead of being refracted, this gives use some specular highlight. Instead of computing realistic physical propreties of the material (using Fresnel equations for example), we will simply mix the refracted and reflected light arbitrarly.
We compute the reflected vector using the incident vector and the normal:
Adding the reflection to the background gives us:
And combining both refraction and reflection:
Another cool thing about SDFs is that we can smoothly "blend" two shapes by using a special function, you can read more about it here Smooth Minimum - Inigo Quilez
By offsetting the sample coordinates of the red and blue channel of the texture, we can add a chromatic aberration effect
This was a quick and dirty article I wrote in an evening, to get the crisp glassy look Apple showcased would need more work.
If you want to read more about signed distance functions, I have an article about the Raymarching algorithm which is based on 3D SDFs.
You can also find more about 2D (and 3D) SDFs on Inigo Quilez's website