One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.
this is the first one I've seen that isn't just feTurbulence. Thank you for doing it right! I've been thinking about it since the first liquid glass clones!
I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
I considered WebGL, and I agree—a shader is more performant for real-time effects.
But WebGL comes with drawbacks:
- You need JS code running before anything shows up.
- Shaders can’t directly manipulate the DOM render. To make refraction work, you’d have to re-render everything into a canvas—which isn’t really “the web” anymore.
With the SVG/CSS approach, you can pre-render the displacement map (at build time or on the backend) and get the refraction visible on the very first frame. Plus, it integrates cleanly with existing, traditional UIs.
That said, this approach could definitely be improved. Ideally we’d have shader-like features in the SVG Filter spec (there was a proposal, but it seems abandoned). There are some matrix operations available in SVG Filters, but they’re limited—and for my first blog post I wanted to focus more on pedagogy, art, and technique than heavy optimization.
Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
By far the most impressive browser implementation of glass I've seen. Though it doesn't seem like it'd be viable in a "real" website due to compatibility and performance.
Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png
The thing that makes liquid glass actually somewhat work compared to previous shiny glass designs is the automatic tint adjustment for contrast. Nothing I've seen actually pulls this off.
That will be one of the goals of one of my next articles.
But it cannot be implemented like Apple does (with a delay on switch between dark and light).
What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white.
Then the layer on top of it would do the opposite.
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.
Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...
Apple design nowadays should be something we point to and laugh at, not something to imitate.
Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control.
It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died.
It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye in charge didn't help.
The problem remains: there's no longer an editor in charge.
Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.
I first tried the demos on Firefox and was like "wow, this looks fancy". Then, I saw there was a "Chrome-only" warning. I actually prefer the way it looks on Firefox, TBH.
59 comments
[ 3.4 ms ] story [ 69.7 ms ] threadOne thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.
But WebGL comes with drawbacks:
- You need JS code running before anything shows up.
- Shaders can’t directly manipulate the DOM render. To make refraction work, you’d have to re-render everything into a canvas—which isn’t really “the web” anymore.
With the SVG/CSS approach, you can pre-render the displacement map (at build time or on the backend) and get the refraction visible on the very first frame. Plus, it integrates cleanly with existing, traditional UIs.
That said, this approach could definitely be improved. Ideally we’d have shader-like features in the SVG Filter spec (there was a proposal, but it seems abandoned). There are some matrix operations available in SVG Filters, but they’re limited—and for my first blog post I wanted to focus more on pedagogy, art, and technique than heavy optimization.
See https://github.com/nkzw-tech/liquid-glass
But liquid glass is such a horrible idea for a UI!
Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's.
Introducing glass lens f*ckery just for the sake of it is terrible.
Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control.
It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died.
It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye in charge didn't help.
The problem remains: there's no longer an editor in charge.
Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.
Great article though.
Unconvinced about the usability case for 'glass'.
Once again, Apple takes off and nukes it's developer ecosystem from orbit.
https://www.netflix.com/browse/genre/839338