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

21–30 of 125 posts

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

#21

Post by silvestrov »

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 think you overestimate how much most users are able to detect such differences and will care about it.

Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands.

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

#22

Post by kris-kay »

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 agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually. For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D. And you're right about the effect being more visible when moving over a fixed background. The demo site I'm working on for the library does this, it's just not ready yet.

Thanks for sharing the resources!

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

#23

Post by refulgentis »

Pro tip: Apple adds fancy GPU effects because Android can't rely on good GPUs, so Apple can continually define premium.

Thus, the odds you're doing glass-morphism via a Gaussian blur and drop shadow in CSS, are exactly 0. They are assuredly at abstraction levels far below that.

(disclaimer: worked on Pixel, did the color extraction + color system stuff for Material You)

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

#24

Post by _benton »

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 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 screwed and I'm sure Apple will be happy to push devs away from those solutions as they're inferior for users.

Now they just need to figure out a way to push RN apps towards true native.

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

#25

Post by victorbjorklund »

jand wrote: post #20

Are users allowed to copy the referenced egg-shell.png and host it themselves or is this connected to some sort of metric you like to gather?

If you got to the site hosting the image it says:

/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

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

#27

Post by kris-kay »

chrismorgan wrote: post #3

This suffers from the problem of only blurring using the pixels immediately behind the surface, as demonstrated well in https://www.joshwcomeau.com/css/backdrop-filter/#the-issue . That and the discussion in https://news.ycombinator.com/item?id=42302907 are good reading. If the backdrop is going to move underneath, this is fairly important; if it will be static, it’s not normally important.

I did read Josh's great article and had a go at implementing the tutorials. Unfortunately, I ran into some issues with the border-radius via SVG mask bit. It worked great on a hardcoded element, but I still need to figure out how to make it work across a whole component library where the border-radius changes based on the user's branding and container-queries.

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

#28

Post by its-summertime »

refulgentis wrote: post #23

Pro tip: Apple adds fancy GPU effects because Android can't rely on good GPUs, so Apple can continually define premium. Thus, the odds you're doing glass-morphism via a Gaussian blur and drop shadow in CSS, are exactly 0. They are assuredly at abstraction levels far below that. (disclaimer: worked on Pixel, did the color extraction + color system stuff for Material You)

It's meant to mimic frosted glass, not Apple's liquid glass design.

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

#29

Post by kris-kay »

armchairhacker wrote: post #26

Small issue: the shadow between the top and the scrollable area with the toggles and code fades out when you scroll down (presumably it should be initially hidden and fade in).

Good catch! It's not a fading-in issue; the shadow is just scrolling out of view. I designed those "overhang" box-shadows to be applied to the inside of an element rather than cast down from one. I see now that I need to apply the latter kind in this case. Thanks for letting me know!

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

#30

Post by kris-kay »

victorbjorklund wrote: post #25
jand wrote: post #20

Are users allowed to copy the referenced egg-shell.png and host it themselves or is this connected to some sort of metric you like to gather?

If you got to the site hosting the image it says: /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

Yes, thank you for answering. The textures are free to use, but the URL should only be used for prototyping. Here is the website: https://www.transparenttextures.com/
Post reply on HN