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.
Liquid Glass in the Browser: Refraction with CSS and SVG
21–30 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#22Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#23Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#24Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#25Impressive 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.
(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.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#26Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#27Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#28Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#29Impressive 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.