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 3

arghwhat 9/9/2025|

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.

occoder 9/9/2025||

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.

SchemaLoad 9/9/2025||

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.

DHPersonal 9/9/2025|||

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.

occoder 9/9/2025|||

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.

uni_baconcat 9/9/2025||

You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.

seanobannon 9/9/2025||

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

0x20cowboy 9/10/2025||

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.

kubeio 9/12/2025|

Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.

buibuibui 9/9/2025||

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.

arbayi 9/9/2025||

https://github.com/dashersw/liquid-glass-js maybe you can also check this out?

_pferreir_ 9/9/2025||

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.

pshirshov 9/9/2025||

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.

stanko 9/9/2025||

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?

kubeio 9/10/2025|

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.

no_time 9/9/2025|

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.

More comments...