Apple is going to version 26 across all its operating systems this fall, and with it, a new design aesthetic they call Liquid Glass. This look is given “automatically” to native app developers using “standard components”. We’ve yet to see Apple’s take on delivering this look through web technology, but many web developers have had a crack already. Let’s take a look at how other’s have brought this design look to the web.
Note that the liquid glass look has been rightfully criticized for text contrast accessibility. This is When you set text over unknown backgrounds, other concessions must be made to ensure text accessibility by way of readability. Digital designers have known this for a long time, so it’s surprising to see it come up as seemingly such a surprise here and see Apple scramble through iterations as new Beta versions roll out. I mention this at the top because it may apply to any of the techniques we’ll look at here. Please be cautious.
This can be a quite complex look to pull off on the web! Yes, we’ve got backdrop-filter and that can be a nice effect that even alone bears some similarity here. But the full effect here is different. There is refracted light at play, edges with highlights, different degrees of frosted effects, and other manipulation of what is behind the glass, simulating what glass might do in real life.
I’d also point you to Geoff Graham’s rundown on all this which is loaded with links.
Glass Displacement
While some liquid glass effects lean on a “frosted” effect (which can be quite helpful for text contract) Jhey Tompkins’ Pen here showcases how there may be no frosted effect at all. The “glass” may be perfectly clear yet still refract the light and distort what you can see behind and through it. The effect here works great as there is no text on top to worry about the readiblity of. There is text behind, which is less important for readability as you can simply move it away.
SVG Blur and Displacement
Here is one that uses backdrop-filter as expected, but it’s not a simple blur as is most commonly seen. It uses the lesser-known ability of backdrop-filter to use url() and link to an SVG filter, in this case using both feDisplacementMap and feGaussianBlur. This makes a very unique light refraction look that is a different type of frosting than just color, all while not losing much color.
A React Component
Max Rovensky got in on this early, producing Liquid Glass React, which provides a component with a bunch of props for controlling the exact look you’re after:
<LiquidGlass
displacementScale={64}
blurAmount={0.1}
saturation={130}
aberrationIntensity={2}
elasticity={0.35}
cornerRadius={100}
padding="8px 16px"
onClick={() => console.log('Button clicked!')}
>
<span className="text-white font-medium">Click Me</span>
</LiquidGlass>Code language: HTML, XML (xml)I think all those props showcase nicely just how complex all the “dials” are for liquid glass and how difficult it must be for Apple to turn them all the right amount under the right circumstances to minimize accessibility issues. You’ll face the same should you go down this path with a site!
Atlas Pup Tutorial
The pseudonymous Pup Atlas does a good job of starting with and explaining backdrop-filter before jumping into the other effects needed, ultimately again with SVG filters, to do needed things like distortion.
More Demos!
I like the emphasized highlights in the Pen below, making it extra glass-like. The morphing selected option gives the liquid effect, and the background is blurred so heavily it seems unlikely to cause legibility contrast issues (but you’d still have to be careful about color contrast specifically).
Here’s another example where there is no blur at all, and the frosting is only in the form of a very light transluent white. But distortion is on fully display making it quite glassy. Perhaps on purpose, you can see how the “Artist” part below (“Nao”) becomes hard to read at certain points of the scroll movement.
The light distortion can implemented strongly enough that in the example below you can see some of the refracted wallpaper appear as if it’s moving upward while underneath the navbar elements as wallpaper otherwise is moving downward.
When we talk about “frosted” glass typically it just means extra blurring and perhaps a light color overlay, but here the frosting is actually textured which is relatively common in real life glass usage, like office doors and shower sliders.
These water droplets below are made with largely the same techniques as we’ve seen so far, but really dialed up to 11 with loads of box-shadow both in and out. Usually in Liquid Glass, the shadows aren’t particularly as heavy, but of course, it looks great here. It makes me think if this visual language is really more about the liquid than the glass.
