Liquid Glass in the Browser: Refraction with CSS and SVG

https://kube.io/blog/liquid-glass-css-svg/

by Sateeshm • 11 months ago

495 120 11 months ago

$Preview of Liquid Glass in the Browser: Refraction with CSS and SVG$ kube.io

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• 11 months ago

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.

altairprime• 11 months ago

I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.

tkzed49• 11 months ago

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!

explosion-s• 11 months ago

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

davidmurdoch• 11 months ago

Impressive!

cycomanic2• 11 months ago

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

lagrange772• 11 months ago

https://en.wikipedia.org/wiki/Chromatic_aberration

Lorin• 11 months ago

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

kaptainscarlet2• 11 months ago

probably shaders are compiling and initialising on every drag movement

IshKebab• 11 months ago

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

thisOtterBeGood• 11 months ago

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

qzio• 11 months ago

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

kubeio8• 11 months ago

I considered WebGL, and I agree—a shader is more performant for real-time effects.

But WebGL comes with drawbacks:

- You need JS code running before anything shows up.

- Shaders can’t directly manipulate the DOM render. To make refraction work, you’d have to re-render everything into a canvas—which isn’t really “the web” anymore.

With the SVG/CSS approach, you can pre-render the displacement map (at build time or on the backend) and get the refraction visible on the very first frame. Plus, it integrates cleanly with existing, traditional UIs.

That said, this approach could definitely be improved. Ideally we’d have shader-like features in the SVG Filter spec (there was a proposal, but it seems abandoned). There are some matrix operations available in SVG Filters, but they’re limited—and for my first blog post I wanted to focus more on pedagogy, art, and technique than heavy optimization.

kkkqkqkqkqlqlql• 11 months ago

I'm on mobile and your site works much better than the WebGL one.

msy• 11 months ago

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.

spicybright• 11 months ago

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

StrangeDoctor2• 11 months ago

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• 11 months ago

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

kubeio8• 11 months ago

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• 11 months ago

Performance aside, this is really well done.

keepamovin• 11 months ago

lol this demo is SO cool. you have NOTHING to be anything but proud and happy of. you did excellently and this UI is the perfect realization of this idea. Well done!

It ran perfectly smoothly with no perf hit in 2020 mba m1. there are no issues with this.

rafark• 11 months ago

You’re absolutely right — it’s pretty slow right now and needs optimization.

Man the ptsd that AIs have given us from sentences like this.

kubeio8• 11 months ago

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.

crent• 11 months ago

It's very very smooth for me now. Impressive. Thank you for sharing!

cpojer• 11 months ago

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• 11 months ago

Nice! I like yours more

WD-422• 11 months ago

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

al_borland• 11 months ago

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-422• 11 months ago

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.

RestartKernel• 11 months ago

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.

thrtythreeforty• 11 months ago

How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.

kubeio8• 11 months ago

I used React with vanilla SVG and Motion to animate.

qingcharles• 11 months ago

The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.

jrochkind1• 11 months ago

i'm amazed how good the write-up is, with amazing interactive visual aids!

LeoPanthera• 11 months ago

404'd?

tossit444• 11 months ago

404?

airstrike• 11 months ago

Strangely the "Playground" session seems to work well in Firefox but nothing else does

retox• 11 months ago

Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)

SchemaLoad2• 11 months ago

It looks really good on iOS. I've been running the beta for a while and the execution is great.

internet2000• 11 months ago

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

creatonez• 11 months ago

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.

kubeio8• 11 months ago

That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white. Then the layer on top of it would do the opposite.

ryukoposting• 11 months ago

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

_ZeD_• 11 months ago

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

ivolimmen• 11 months ago

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

yreg• 11 months ago

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

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

nine_k• 11 months ago

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.

mirekrusin2• 11 months ago

Try on chromium based browser - it's much better.

fuzzy2• 11 months ago

The backdrop-filter thingy most definitely does not work in Firefox. Everything above does.

It works on Chromium-based browsers but it does not look great, probably needs some filtering.

7bit2• 11 months ago

Works fine on Firefox tho

pcardoso• 11 months ago

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

hyperbolablabla• 11 months ago

Not on mobile

frizlab• 11 months ago

No. The effects are not fully there on Firefox/Safari.

jansan3• 11 months ago

No. It becomes apparent in the "Magnifying Glass" demo. Nothing is magnified in Firefox, while it is a really cool effect in Chrome.

sonar_un• 11 months ago

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

conradfr• 11 months ago

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.

chrisldgk• 11 months ago

I mean that makes sense though, right? Since it’s only available on Chrome, it’s the only one doing all the computations (GPU or otherwise) that other browsers won’t do, since they just ignore the rule.

Kiro• 11 months ago

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.

sudarshandodiya• 11 months ago

In that case it would be more apt to title the post as "Liquid Glass in Chromium Browsers...", or something along those lines. People looking at the title are going to assume that it works accross all browsers, click on the link, and then get disappointed.

latexr• 11 months ago

For those wondering about the reference:

https://youtu.be/GamP4chXJ2I?t=17

wltr• 11 months ago

I had some feeling I know that from somewhere, but couldn’t recall the source. Thanks.

calrain• 11 months ago

Incredible work on the CSS and SVG!

But liquid glass is such a horrible idea for a UI!

Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's.

Introducing glass lens f*ckery just for the sake of it is terrible.

occoder2• 11 months ago

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.

SchemaLoad2• 11 months ago

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.

occoder2• 11 months ago

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.

DHPersonal• 11 months ago

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.

uni_baconcat• 11 months ago

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

levmiseri• 11 months ago

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

maxvij• 11 months ago

Agreed!

_pferreir_• 11 months ago

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.

maelito• 11 months ago

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

Great article though.

hermitcrab• 11 months ago

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.

miyuru• 11 months ago

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

meindnoch• 11 months ago

Apple lost it when Johnny Ive died.

gyomu• 11 months ago

This is cool and a nice writeup but - Liquid Glass is the totality of the design language, including elements close to one another merging together meta-balls like, the different tinting/clear modes, the controls being on a distinct layer from the content...

This is "just" a glass shader.

jansan3• 11 months ago

That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter.

Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy

mirekrusin2• 11 months ago

Good work and pretty but part of me thinks - ah, ok, that's why our 12 orders of magnitude faster computers than zx spectrum lag more.

Gigachad• 11 months ago

Surprisingly the actual liquid glass ui seems to be perfect 120hz smooth on my 4 year old iPhone.

azatom• 11 months ago

Why is it so loud? On same machine Cyberpunk2077 goes with highest settings with same fan noise.

no_time• 11 months ago

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.

stanko• 11 months ago

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?

kubeio8• 11 months ago

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.

arbayi• 11 months ago

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

redbell• 11 months ago

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

buibuibui• 11 months ago

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.

arghwhat• 11 months ago

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.

jansan3• 11 months ago

I was actually thinking about implementing exactly this (using feDisplacementMap), but never found time and I was not sure if it would be possible at all. Great to see that it actually works and someone with deep SVG knowledge implemented it.

The whole blog entry is a piece of art and on one level with Bartosz Ciechanowski's work. If you want to make money from it, you will have to find less niche subject's, though.

martzoukos• 11 months ago

Soon we'll be creating black hole simulations to run a browser effect.

a022311• 11 months ago

Despite being on Firefox and seeing the effects half-working (at least we get performance ;D), this looks like the best implementation I've seen up until now (for some reason I was researching it a lot the last few days).

What I loved most though is the website design and the carefully crafted interactive visualizations! For me, they're on the same level as those of Bartosz Ciechanowski and Josh Comeau. I really want to see the source code...

kubeio8• 11 months ago

Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.

pshirshov• 11 months ago

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.

diabllicseagull• 11 months ago

I guess we all knew that liquid glass design language was gonna leak into the web eventually but if I see a website drain my battery so it can distort the text I’m trying to read I won’t be staying.

The stuttering has already been pointed out here so I won’t pile on.

jjuup• 11 months ago

Well done. Especially love the whole article layout and quality, aside from the good execution. Liquid glass as concept doesn't really enhance practical UX that much (and might even make it worse if overused), but it's a nice experience and something new and delightful.

andredurao• 11 months ago

I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(

seanobannon• 11 months ago

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

lovegrenoble2• 11 months ago

Fantastic demo, very slick!

ghc• 11 months ago

Fantastic job! Great writeup too!

lovegrenoble2• 11 months ago

insightful and nice work

wraptile2• 11 months ago

What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!

dmix2• 11 months ago

The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.

wraptile2• 11 months ago

Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.

coolThingsFirst• 11 months ago

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

sroussey• 11 months ago

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

cantalopes• 11 months ago

awesome! brings back memories days of creative coding for fun

seanw265• 11 months ago

I'm still not sold on liquid glass as a whole. It can be quite beautiful, but in the demos provided (and even in Apple's promotional materials) I think readability of UI elements suffers tremendously.

That said, I've seen many attempt to recreate the effect on web but you've outdone them all. The variety and mathematical modeling of edge shapes elevates this implementation above the rest.

If you decide to continue with this, I would love to see:

1. chromatic aberration along displaced areas

2. higher resolution in the refraction

Many people discussing performance issues but this runs like butter on my M3 Pro.

0x20cowboy• 11 months ago

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.

kubeio8• 10 months ago

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

Liquid Glass in the Browser: Refraction with CSS and SVG

Related Stories