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 5

WD-42 9/9/2025|

Does this not work on Firefox? Just looks like regular gradients.

al_borland 9/9/2025|

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

WD-42 9/9/2025||

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.

efilife 9/9/2025||

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

josephcsible 9/10/2025||

That's quite common. See also https://ux.stackexchange.com/q/120541/115045

tkzed49 9/9/2025||

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!

ryukoposting 9/9/2025||

Very slick. Shame it doesn't work on Firefox.

sroussey 9/9/2025||

It’s a shame it does not work on iOS 26.

LeoPanthera 9/9/2025||

404'd?

lovegrenoble 9/9/2025||

Fantastic demo, very slick!

cantalopes 9/9/2025||

awesome! brings back memories days of creative coding for fun

coolThingsFirst 9/9/2025||

One of the greatest tech related blogposts that I have EVER read.

tossit444 9/9/2025||

404?

hermitcrab 9/9/2025|

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.

More comments...