Liquid Glass in the Browser: Refraction with CSS and SVG

Posted by Sateeshm 9/8/2025

Liquid Glass in the Browser: Refraction with CSS and SVG(kube.io)

495 points | 120 commentspage 2

redbell 9/9/2025|

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/).

jrochkind1 9/9/2025||

i'm amazed how good the write-up is, with amazing interactive visual aids!

wraptile 9/9/2025||

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!

dmix 9/9/2025|

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.

wraptile 9/10/2025||

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.

andredurao 9/9/2025||

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 :(

creatonez 9/9/2025||

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.

kubeio 9/10/2025|

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.

a022311 9/9/2025||

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...

kubeio 9/10/2025|

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.

jansan 9/9/2025||

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.

thrtythreeforty 9/9/2025||

How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.

kubeio 9/9/2025|

I used React with vanilla SVG and Motion to animate.

qingcharles 9/10/2025||

The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.

jjuup 9/9/2025||

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.

miyuru 9/9/2025|

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

More comments...