I made liquid glass with CSS:)
liquid-glass.atlaspuplabs.com
I made liquid glass with CSS:)
1–9 of 9 posts
Re: I made liquid glass with CSS:)
#2Long 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! :)
Re: I made liquid glass with CSS:)
#3[deleted]
Re: I made liquid glass with CSS:)
#4Long 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 C…
What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.
Re: I made liquid glass with CSS:)
#5Long 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 C…
What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.
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.
Re: I made liquid glass with CSS:)
#6The "this won't work in your browser" warning is too dim to be legible.
Re: I made liquid glass with CSS:)
#7Long 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 C…
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?
Re: I made liquid glass with CSS:)
#8Long 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 C…
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?
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
Re: I made liquid glass with CSS:)
#9Earlier quoted context omitted.
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?
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…
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.