I made liquid glass with CSS:)(liquid-glass.atlaspuplabs.com) |
I made liquid glass with CSS:)(liquid-glass.atlaspuplabs.com) |
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.