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...
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.
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.
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.
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.
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.
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'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.
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.
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!
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'm on mobile and your site works much better than the WebGL one.
What is causing the ghosting/delay when moving the glass over text?
probably shaders are compiling and initialising on every drag movement
Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.
https://en.wikipedia.org/wiki/Chromatic_aberration
?
Yes chromatic abberation is caused by dispersion.
Damn, outnerded.
Looks nice! It's too slow to actually use though. Op's is much smoother.
It's the opposite on my macbook pro/chrome computer... the OP is unusable, but the webGL version is super smooth
it's extremely quick on my M3 Mac too.
Not over here. As far as I understand Op's solution does not utilize a gpu.
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!
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.
Haha, I’m the author of the post.
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.
> You’re absolutely right — it’s pretty slow right now and needs optimization.
Man the ptsd that AIs have given us from sentences like this.
Performance aside, this is really well done.
I did a quick performance fix, should be a bit better, at least on Chrome.
(Safari stills seems to be a bit slow to render SVGs)
Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
It's very very smooth for me now. Impressive. Thank you for sharing!
Yeah this site does not scroll like butter as it were.
But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.
Most browsers will engage the GPU for compositing layers if they think the layers can be separated - https://www.smashingmagazine.com/2016/12/gpu-animation-doing...
Interesting, thank you!
Same, very laggy on my machine. The spectacular border effects also didn't work for me.
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.
Plenty of people have multiple browsers installed. If you have time to comment to complain then you have time to open a second app to see a tech demo
What is funny is that for me the page on Chrome is slower and the scrolling jankier than on Firefox with the unsupported effects (macOS M1).
Besides that, very impressed by the article presentation.
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.
I had the same reaction but the weird thing is: it looked ok in FireFox..?
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.
Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere
https://caniuse.com/?search=backdrop-filter
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.
> which are more powerful and is out-of-spec
These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url
And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...
The backdrop-filter thingy most definitely does not work in Firefox. Everything above does.
It works on Chromium-based browsers but it does not look great, probably needs some filtering.
Try on chromium based browser - it's much better.
For those wondering about the reference:
https://youtu.be/GamP4chXJ2I?t=17
I had some feeling I know that from somewhere, but couldn’t recall the source. Thanks.
Works fine on Firefox tho
No. It becomes apparent in the "Magnifying Glass" demo. Nothing is magnified in Firefox, while it is a really cool effect in Chrome.
And for me it was where it was the smoothest. But it even worked in Safari, albeit a bit slowly.
No. The effects are not fully there on Firefox/Safari.
Not on mobile
Ok, this was the funniest comment i've read in a while.
I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations.
See https://github.com/nkzw-tech/liquid-glass
Nice! I like yours more
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...
This is "just" a glass shader.
That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter.
Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy
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.
Very nice, I really like the vector animations :)
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.
As much as I still dislike Liquid Glass, this is insanely impressive!
Agreed!
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!
The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.
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 :(
i'm amazed how good the write-up is, with amazing interactive visual aids!
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...
Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.
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.
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.
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.
How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.
I used React with vanilla SVG and Motion to animate.
The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.
Don’t blame the author for the chrome only demo, blame Apple, and this bug from 2014! https://bugs.webkit.org/show_bug.cgi?id=127102
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.
Netlfix's logged out UI has this glass effect for background for some time and it slows down the whole site.
https://www.netflix.com/browse/genre/839338
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.
Most people aren't very discerning about user interface intricacies.
Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone".
So there's that.
You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.
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'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.
https://github.com/dashersw/liquid-glass-js maybe you can also check this out?
Nice write up! I'm always happy to see interactive articles.
As someone who also do interactive articles from time to time, I'm wondering what is the tech stack you are using to make these?
It is a simple React + Motion + Tailwind + Vanilla SVG here.
But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.
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.
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.
None of it looks usable. Perfect for digital family photos.
Great article though.
Incredible work on the CSS and SVG!
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.
Good work and pretty but part of me thinks - ah, ok, that's why our 12 orders of magnitude faster computers than zx spectrum lag more.
Surprisingly the actual liquid glass ui seems to be perfect 120hz smooth on my 4 year old iPhone.
I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.
Fantastic job! Great writeup too!
Why is it so loud? On same machine Cyberpunk2077 goes with highest settings with same fan noise.
Apple lost it when Johnny Ive died.
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
Strangely the "Playground" session seems to work well in Firefox but nothing else does
Soon we'll be creating black hole simulations to run a browser effect.
Does this not work on Firefox? Just looks like regular gradients.
> 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.
I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.
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
That's quite common. See also https://ux.stackexchange.com/q/120541/115045
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!
It’s a shame it does not work on iOS 26.
Very slick. Shame it doesn't work on Firefox.
Fantastic demo, very slick!
awesome! brings back memories days of creative coding for fun
404'd?
One of the greatest tech related blogposts that I have EVER read.
insightful and nice work
404?
Some serious work has gone into this article.
Unconvinced about the usability case for 'glass'.
Once again, Apple takes off and nukes it's developer ecosystem from orbit.
[dead]
Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)
It looks really good on iOS. I've been running the beta for a while and the execution is great.
[dead]