Liquid Glass in the Browser: Refraction with CSS and SVG • Hacker News Board

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#71

Post by conradfr » Tue, Sep 09, 2025, 8:47 AM UTC

_ZeD_ wrote: post #34

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

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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#72

Post by no_time » Tue, Sep 09, 2025, 9:01 AM UTC

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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#73

Post by stanko » Tue, Sep 09, 2025, 9:08 AM UTC

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?

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#74

Post by lagrange77 » Tue, Sep 09, 2025, 9:16 AM UTC

cycomanic wrote: post #20

explosion-s wrote: post #6

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

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

?

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#75

Post by arbayi » Tue, Sep 09, 2025, 9:30 AM UTC

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

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#76

Post by redbell » Tue, Sep 09, 2025, 9:36 AM UTC

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

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#77

Post by buibuibui » Tue, Sep 09, 2025, 9:44 AM UTC

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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#78

Post by arghwhat » Tue, Sep 09, 2025, 9:47 AM UTC

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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#79

Post by jansan » Tue, Sep 09, 2025, 9:53 AM UTC

7bit wrote: post #38

_ZeD_ wrote: post #34

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

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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#80

Post by Kiro » Tue, Sep 09, 2025, 9:54 AM UTC

_ZeD_ wrote: post #34

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.