[dead]
Liquid Glass in the Browser: Refraction with CSS and SVG
91–100 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#92I 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.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#93I 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
What is causing the ghosting/delay when moving the glass over text?
probably shaders are compiling and initialising on every drag movement
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#94Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#95Well 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.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#96I 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
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.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#97Chrome‑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...
For those wondering about the reference: https://youtu.be/GamP4chXJ2I?t=17
I had some feeling I know that from somewhere, but couldn’t recall the source. Thanks.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#98I 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
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…
I'm on mobile and your site works much better than the WebGL one.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#99Earlier quoted context omitted.
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.
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...
Interesting, thank you!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#100Chrome‑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.
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.