Liquid Glass in the Browser: Refraction with CSS and Svg
Posted4 months agoActive4 months ago
kube.ioTechstoryHigh profile
calmmixed
Debate
60/100
CSSSvgLiquid GlassWeb DevelopmentUi/ux
Key topics
CSS
Svg
Liquid Glass
Web Development
Ui/ux
The article showcases an impressive implementation of Liquid Glass effects in the browser using CSS and SVG, sparking discussion on its usability, performance, and potential applications.
Snapshot generated from the HN discussion
Discussion Activity
Very active discussionFirst comment
2h
Peak period
71
0-12h
Avg / period
20
Comment distribution120 data points
Loading chart...
Based on 120 loaded comments
Key moments
- 01Story posted
Sep 8, 2025 at 5:32 PM EDT
4 months ago
Step 01 - 02First comment
Sep 8, 2025 at 7:58 PM EDT
2h after posting
Step 02 - 03Peak activity
71 comments in 0-12h
Hottest window of the conversation
Step 03 - 04Latest activity
Sep 13, 2025 at 1:14 AM EDT
4 months ago
Step 04
Generating AI Summary...
Analyzing up to 500 comments to identify key contributors and discussion patterns
ID: 45174297Type: storyLast synced: 11/20/2025, 7:40:50 PM
Want the full context?
Jump to the original sources
Read the primary article or dive into the live Hacker News thread when you're ready.
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.
Regardless, this is a great writeup for changes I wish to never see in ordinary UI.
?
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.
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.
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.
It ran perfectly smoothly with no perf hit in 2020 mba m1. there are no issues with this.
Man the ptsd that AIs have given us from sentences like this.
(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.
See https://github.com/nkzw-tech/liquid-glass
> 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.
https://caniuse.com/?search=backdrop-filter
PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url
And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...
It works on Chromium-based browsers but it does not look great, probably needs some filtering.
Besides that, very impressed by the article presentation.
https://youtu.be/GamP4chXJ2I?t=17
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.
Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone".
So there's that.
This is "just" a glass shader.
Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy
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?
But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.
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...
The stuttering has already been pointed out here so I won’t pile on.
Great article though.
https://www.netflix.com/browse/genre/839338
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.
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.
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.
Unconvinced about the usability case for 'glass'.
Once again, Apple takes off and nukes it's developer ecosystem from orbit.