I made liquid glass with CSS:)

https://liquid-glass.atlaspuplabs.com/

by pupatlas • 1 year ago

7 7 1 year ago

liquid-glass.atlaspuplabs.com

pupatlas3• 1 year ago

Long time lurker, first time poster— be gentle :P

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• 1 year ago

What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.

pupatlas3• 1 year 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.

dtagames2• 1 year 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?

pupatlas3• 1 year 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

throwanem• 1 year ago

The "this won't work in your browser" warning is too dim to be legible.

I made liquid glass with CSS:)

Related Stories