{"id":6644,"date":"2025-07-28T21:57:16","date_gmt":"2025-07-29T02:57:16","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6644"},"modified":"2025-07-28T21:57:17","modified_gmt":"2025-07-29T02:57:17","slug":"liquid-glass-on-the-web","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/liquid-glass-on-the-web\/","title":{"rendered":"Liquid Glass on the Web"},"content":{"rendered":"\n

Apple is going to version 26 across all its operating systems this fall, and with it, a new design aesthetic they call\u00a0Liquid Glass<\/a>. 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

This can be a quite complex look to pull off on the web! Yes, we’ve got backdrop-filter<\/a><\/code> 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.<\/p>\n\n\n\n

I’d also point you to Geoff Graham’s rundown<\/a> on all this which is loaded with links.<\/p>\n\n\n\n

Glass Displacement<\/h2>\n\n\n\n

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<\/em>, which is less important for readability as you can simply move it away.<\/p>\n\n\n\n