Live data from Hacker News

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

glass3d.dev

61–70 of 125 posts

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

#61

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)

I mean you are right...but I still want to make the nicest thing I can make for the web.

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

#62

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.

Yes thank you

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

#63
post #12

i collect these! https://github.com/swyxio/spark-joy others - https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. - frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/ - glassy glassmorphism [codepen]( https://codepen.io/a-trost/pen/dypQzwq ), [in context]( https://codepen.i…

Nice! Spark Joy looks like an awesome resource.

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

#64
post #12

i collect these! https://github.com/swyxio/spark-joy others - https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. - frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/ - glassy glassmorphism [codepen]( https://codepen.io/a-trost/pen/dypQzwq ), [in context]( https://codepen.i…

Searched for an ASCII Font generator, but didn't see one. Here's one tool I use:

https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

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

#65
post #64
post #12

i collect these! https://github.com/swyxio/spark-joy others - https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties. - frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/ - glassy glassmorphism [codepen]( https://codepen.io/a-trost/pen/dypQzwq ), [in context]( https://codepen.i…

Searched for an ASCII Font generator, but didn't see one. Here's one tool I use: https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

added!

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

#66
post #24

Earlier quoted context omitted.

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.

> I certainly think Apple thinks they are inferior, but I'm not sure how devs and users feel about it.

Does it matter at that point? Seriously asking.

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

#67

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 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.

Gold is really good at reflecting infrared which is why it was chosen as the coating for JWST's mirrors. I wonder if the colors just past visible on its way to IR would be just perceptible enough to give the look you are noticing???

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

#68

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 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.

Okay, I was with you about users caring about differences in the look of a glass refraction effect. But I'm flabergasted at the fact that there are people that cannot tell the difference between Coke and Pepsi by taste.

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

#69

That content scrolls quite slow on my phone. Is there another scrolling effect that makes it slower on purpose or it's a side effect of the glass look?

Interesting, no there are no scroll effects anywhere on the page. Would you mind sharing what device, browser, and level of internet connection you're using?

Never mind, I tried recording it now but could not reproduce it anymore. It was probably something on my phone at the time (Firefox on Android). I tried to remove or edit my previous comment but it seems it's not an option. Sorry for the noise.
Post reply on HN