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.
I actually see gpu utilisation in OP's website when I move things (m3 pro), but this other solution shows much less gpu utilisation (prob more efficient?).
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.
I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow right now and needs optimization.
And it’s not just the refraction/displacement map: plenty of other parts, like visualisations, aren’t optimized yet either.
lol this demo is SO cool. you have NOTHING to be anything but proud and happy of. you did excellently and this UI is the perfect realization of this idea. Well done!
It ran perfectly smoothly with no perf hit in 2020 mba m1. there are no issues with this.
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...
This is exactly the kind of thing where this is OK since it's literally impossible otherwise. It's showcasing a specific feature that is not generally available.
In that case it would be more apt to title the post as "Liquid Glass in Chromium Browsers...", or something along those lines. People looking at the title are going to assume that it works accross all browsers, click on the link, and then get disappointed.
I mean that makes sense though, right?
Since it’s only available on Chrome, it’s the only one doing all the computations (GPU or otherwise) that other browsers won’t do, since they just ignore the rule.
Not OK on mobile Firefox: displacement maps do not apply, so there's no actual refraction, the liquid feeling; there's only the specular effect at the edges.
Try opening it in a Chromium-based browser and compare.
backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.
Not sure if this is relevant, but while moving the slider around, in chromium i see 40% gpu utilisation, while in firefox less than 20% (macbook m3 pro). I do not observe any noticeable difference otherwise in terms of quality.
PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
I guess we all knew that liquid glass design language was gonna leak into the web eventually but if I see a website drain my battery so it can distort the text I’m trying to read I won’t be staying.
The stuttering has already been pointed out here so I won’t pile on.
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.
This is cool and a nice writeup but - Liquid Glass is the totality of the design language, including elements close to one another merging together meta-balls like, the different tinting/clear modes, the controls being on a distinct layer from the content...
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.
I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line.
Regardless, this is a great writeup for changes I wish to never see in ordinary UI.
I'm still not sold on liquid glass as a whole. It can be quite beautiful, but in the demos provided (and even in Apple's promotional materials) I think readability of UI elements suffers tremendously.
That said, I've seen many attempt to recreate the effect on web but you've outdone them all. The variety and mathematical modeling of edge shapes elevates this implementation above the rest.
If you decide to continue with this, I would love to see:
1. chromatic aberration along displaced areas
2. higher resolution in the refraction
Many people discussing performance issues but this runs like butter on my M3 Pro.
Excellent attempt despite the browser support limitations. The inline, interactive examples were also an added value, which, at some point, I felt like I was reading one of Ciechanowski's articles (https://ciechanow.ski/).
What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!
Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.
I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(
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.
Despite being on Firefox and seeing the effects half-working (at least we get performance ;D), this looks like the best implementation I've seen up until now (for some reason I was researching it a lot the last few days).
What I loved most though is the website design and the carefully crafted interactive visualizations! For me, they're on the same level as those of Bartosz Ciechanowski and Josh Comeau. I really want to see the source code...
I was actually thinking about implementing exactly this (using feDisplacementMap), but never found time and I was not sure if it would be possible at all. Great to see that it actually works and someone with deep SVG knowledge implemented it.
The whole blog entry is a piece of art and on one level with Bartosz Ciechanowski's work. If you want to make money from it, you will have to find less niche subject's, though.
Well done. Especially love the whole article layout and quality, aside from the good execution. Liquid glass as concept doesn't really enhance practical UX that much (and might even make it worse if overused), but it's a nice experience and something new and delightful.
Neat! Doesn't look particularly pleasant as the edges have high contrast single-pixel width artifacts, but maybe it's possible to smooth that out. Could also just be a quirk in chrome's svg/backdrop filter support that they'll fix.
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've been running the beta on my phone for a while ago, and I pretty much forgot about it. The new design works really well and is much less obtrusive than you'd imagine. Those few bad moments posted from the first dev beta have all been resolved now.
It still has plenty of consistency errors and issues for the devs. But even if they fix all the bugs, I still think the UI changes are regressive: now things are buried in even more icons; the menus warp, change color, and move in distracting ways; and text on button and menus have never been harder to read.
If the author is around here, I think there is an error in the Equations section. In the Convex Circle equation I think it has an extra set of parens. sqrt(1-(1-x)^2) I believe as it is it’s just linear.
I think the bounciness of the elements is also a very charming characteristic part of the Liquid Glass UI that Apple introduces. But recreating that is probably very difficult with web technologies.
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.
I'm just wondering if the new ray-traced scrollbars and buttons are more functional and would make me more productive than ancient text-mode turbo vision ones, or those in Windows 3.
In the announcement thread here about Liquid Glass there was a guy predicting an avalanche of people implementing this effect badly everywhere they can. Well, here we go.
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 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.
Me too. Sometimes when I browse the internet with my girfriend aside she comments on something and I have no idea what she means. She has to literally point at the screen and show me the text I've ignored and it's ALWAYS the biggest and most flashy font ever
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!
