Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CSS generator for a high-def glass effect

glass3d.dev

Post reply on HN
Print view View original

31–40 of 125 posts

Re: Show HN: CSS generator for a high-def glass effect

#31

Post by kris-kay »

jasonthorsness wrote: post #7
jauntywundrkind wrote: post #5

Looks pretty good. But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution. Material has these wonderful designer resources showing how the app ought to be built of consistent moving layers, shown in 3D from the side. It's clear that there's these layers. But once you go 2d, put it all together, its incredibly hard for me to f…

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

The moat is real! I haven't tried recreating Liquid Glass in the browser yet. From what I've seen, it's possible, but not in a practical, cross-browser, "can be applied to an arbitrary component" kind of way.

Of course, as soon as we figure out how to get it done, Apple will move on to the next thing. I'm okay with that though. It was a bold move, and I can't imagine how much time and money Apple spent making Liquid Glass look that good.

Re: Show HN: CSS generator for a high-def glass effect

#32

Post by rpastuszak »

elpocko wrote: post #11
rpastuszak wrote: post #9

Earlier quoted context omitted.

You’re not looking far back enough:) I see it more as a new Aqua from OSX Cheetah (2000 CE) This is a slight tangent, but 20 years ago I had a nightmare in which I got hit by a tram, died and travelled in time into a world where every computer was running Windows Vista. In other words, fair enough, you might be onto something here after all.

>Aqua from OSX Cheetah I've never used OSX, but I would guess from screenshots that it didn't do dynamic layered gaussian blur of large screen regions in realtime, which would've been too much for the hardware of the year 2000.

That is true, but don't forget water is the essence of moisture.

Also, those scrollbars were quite impressive for their time.

Re: Show HN: CSS generator for a high-def glass effect

#33

Post by kris-kay »

gumby271 wrote: post #13
jasonthorsness wrote: post #7

Earlier quoted context omitted.

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

I think the same is true for when they started using blurs everywhere. They knew Android OEMs would copy it in a worse way and shoot themselves in the foot. That's also why material design doesn't rely on blur effects, it needs to run well on much worse hardware. It's fun seeing the attempts to mimic Liquid Glass though, the most impressive so far is this Flutter package: https://pub.dev/packages/liquid_glass_rendere…

That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → "Only works on Impeller, so Web, Windows, and Linux are entirely unsupported for now"

Re: Show HN: CSS generator for a high-def glass effect

#35

Post by dotancohen »

jasonthorsness wrote: post #7
jauntywundrkind wrote: post #5

Looks pretty good. But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution. Material has these wonderful designer resources showing how the app ought to be built of consistent moving layers, shown in 3D from the side. It's clear that there's these layers. But once you go 2d, put it all together, its incredibly hard for me to f…

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

I recently saw a large gold (plated) surface - larger than a hand. The effect the light played off of that metal was amazing, I've never seen the effect in small gold jewelry. Photographs and video just don't capture it. If Apple ever turns their attention to gold and manages to nail that effect, I would consider one of their devices just for that aspect.

Re: Show HN: CSS generator for a high-def glass effect

#36

Post by andrewingram »

alberth wrote: post #34

I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect: filter: blur(16px);

I’m curious why. I’d have concerns about the performance of this effect, but 44 lines of CSS to achieve a higher level of polish and, dare I say, craft, doesn’t seem like something to be dismissive of at review stage.

Re: Show HN: CSS generator for a high-def glass effect

#37

Post by ivape »

alberth wrote: post #34

I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect: filter: blur(16px);

I have AI that can do just about everything for me, but I still need to make this tradeoff with CSS in 2025?

Re: Show HN: CSS generator for a high-def glass effect

#38

Post by ivape »

magic_hamster wrote: post #10

It's a nice effect, but to me this doesn't really feel like glass. I think the most immediate difference is how light has no interaction with the bevels. I also expect some light to shine back into the glass and affect the lighting and coloring. It's not enough to just throw a blur in there. Also, glass can have its own shadow with some interesting caustics (not sure even Apple does this). I see the shadow here, and…

If it can't be done with CSS, then how can it be done? How can you apply GPU shader effects to a common div? If we can't apply GPU effects to basic HTML and need to do so on custom things like an arbitrary Canvas concoction, then we may as well rebuild a brand-new rendering engine that can apply GPU effects.

HTML is dead. I see no reason to care about it because we only need

tags to get some text across, as just about everything else is used to make a webpage an ad-bomb. So let's just start again with the

tag and better gpu integration, and leave everything else out.

Re: Show HN: CSS generator for a high-def glass effect

#39

Post by kris-kay »

_benton wrote: post #24
jasonthorsness wrote: post #7

Earlier quoted context omitted.

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

I don't think it's that hard for someone with experience writing shaders to emulate. The moat is that it's almost impossible to replicate with browser technology, which hurts web-based ui systems and is still a big challenge with something like flutter or jetpack compose multiplatform. Stuff like React Native get it basically for free because their ui is still technically "native". But apps that rely on web views are…

I fully agree that Liquid Glass is almost impossible to replicate with browser technology without using 3D shaders. But I’m curious to know your opinion about why apps that rely on web views are inferior for users (apart from the above reason). I certainly think Apple thinks they are inferior, but I'm not sure how devs and users feel about it.

Re: Show HN: CSS generator for a high-def glass effect

#40

Post by alberth »

andrewingram wrote: post #36
alberth wrote: post #34

I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect: filter: blur(16px);

I’m curious why. I’d have concerns about the performance of this effect, but 44 lines of CSS to achieve a higher level of polish and, dare I say, craft, doesn’t seem like something to be dismissive of at review stage.

The OP uses this same blur + a lot more effect (to make it look more realistic).

So it'd actually be the OP CSS that would perform worse than this single line.

Post reply on HN