4 ms·

I made liquid glass with CSS:)

7 points by pupatlas 1y ago

pupatlas 1y 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 1y ago
  What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.
  - pupatlas 1y 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 1y 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 1y 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-frameworks/#front_end_frameworks_work 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 1y 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.
deleted 1y ago
[deleted]
throwanem 1y ago
The "this won't work in your browser" warning is too dim to be legible.

7 points by pupatlas 1y 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 1y ago
What is the browser support? I'm in Orion (webkit) and can't see any changes when moving the sliders.
- pupatlas 1y 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 1y 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 1y 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-frameworks/#front_end_frameworks_work 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 1y 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.

deleted 1y ago

[deleted]

throwanem 1y ago

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