Was watching WWDC earlier this week, and was curious how close you could get to liquid glass in the browser. Turns out, pretty darn close. This approach is almost pure CSS, and even replicates the refraction you see in Apple's components. This was a quick and dirty "I wonder if" project, so there's pretty much no cross browser support (this only really works well in Chrome on desktop at the moment)— but if there's interest, I'm considering cleaning it up into a full-fledged react library (and adding real cross-compatibility).
Let me know what you think! :)
gazook89 · 1d ago
What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.
pupatlas · 1d ago
Pretty much just Chrome at the moment, I'm doing some pretty wild SVG trickery to get this to work on this first pass. I'm also using Youtube as a quick moving background to show off the effect.
dtagames · 1d ago
Awesome! I'm a huge fan of advanced CSS and I knew someone would do this.
But React and frameworks in general are the past. How about a native web component, like with Lit?
pupatlas · 19h ago
I'm not sure I agree with the sentiment that "React is in the past". According to the 2024 State of JS, [it's still used by 67% of engineers](https://2024.stateofjs.com/en-US/libraries/front-end-framewo...), compared to just 4% of engineers using Lit. If I were to make a library out of this, I'd want to target the largest cohort of developers I could, so I'm not sure writing one in Lit makes a lot of sense.
As for your first comment though, me too! I love abusing CSS :P
dtagames · 4h ago
Frameworks largely came about because native web components weren't built into the browser. Now, they are. So naturally the old method is more entrenched.
You can write it as a native web component and ship something that works with React and without React.
throwanem · 1d ago
The "this won't work in your browser" warning is too dim to be legible.
Was watching WWDC earlier this week, and was curious how close you could get to liquid glass in the browser. Turns out, pretty darn close. This approach is almost pure CSS, and even replicates the refraction you see in Apple's components. This was a quick and dirty "I wonder if" project, so there's pretty much no cross browser support (this only really works well in Chrome on desktop at the moment)— but if there's interest, I'm considering cleaning it up into a full-fledged react library (and adding real cross-compatibility).
Let me know what you think! :)
But React and frameworks in general are the past. How about a native web component, like with Lit?
As for your first comment though, me too! I love abusing CSS :P
You can write it as a native web component and ship something that works with React and without React.