Liquid Glass in the Browser: Refraction with CSS and SVG

_ZeD_

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

sonar_un

Ok, this was the funniest comment i've read in a while.

ivolimmen

I had the same reaction but the weird thing is: it looked ok in FireFox..?

nine_k

Not OK on mobile Firefox: displacement maps do not apply, so there's no actual refraction, the liquid feeling; there's only the specular effect at the edges. Try opening it in a Chromium-based browser and compare.

yreg

Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere

https://caniuse.com/?search=backdrop-filter

Cu3PO42

backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.

null

[deleted]

7bit

Works fine on Firefox tho

pcardoso

And for me it was where it was the smoothest. But it even worked in Safari, albeit a bit slowly.

hyperbolablabla

Not on mobile

null

[deleted]

explosion-s

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

Lorin

What is causing the ghosting/delay when moving the glass over text?

IshKebab

Looks nice! It's too slow to actually use though. Op's is much smoother.

qzio

It's the opposite on my macbook pro/chrome computer... the OP is unusable, but the webGL version is super smooth

thisOtterBeGood

Not over here. As far as I understand Op's solution does not utilize a gpu.

freehorse

I actually see gpu utilisation in OP's website when I move things (m3 pro), but this other solution shows much less gpu utilisation (prob more efficient?).

cycomanic

Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.

davidmurdoch

Impressive!

msy

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

kubeio

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.

jonahx

Performance aside, this is really well done.

kubeio

I did a quick performance fix, should be a bit better, at least on Chrome.

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

StrangeDoctor

Yeah this site does not scroll like butter as it were.

But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.

CognitiveLens

Most browsers will engage the GPU for compositing layers if they think the layers can be separated - https://www.smashingmagazine.com/2016/12/gpu-animation-doing...

spicybright

Same, very laggy on my machine. The spectacular border effects also didn't work for me.

null

[deleted]

miyuru

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

cpojer

I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations.

See https://github.com/nkzw-tech/liquid-glass

socalgal2

Nice! I like yours more

maelito

None of it looks usable. Perfect for digital family photos.

Great article though.

_pferreir_

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.

creatonez

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.

RestartKernel

By far the most impressive browser implementation of glass I've seen. Though it doesn't seem like it'd be viable in a "real" website due to compatibility and performance.

delta_p_delta_x

Very nice, I really like the vector animations :)

One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.

rezmason

I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line.

Regardless, this is a great writeup for changes I wish to never see in ordinary UI.

levmiseri

As much as I still dislike Liquid Glass, this is insanely impressive!

maxvij

Agreed!

internet2000

Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png