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)
Show HN: CSS generator for a high-def glass effect
61–70 of 125 posts
Re: Show HN: CSS generator for a high-def glass effect
#62Pro 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
#63i 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…
Re: Show HN: CSS generator for a high-def glass effect
#64i 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…
https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...
Re: Show HN: CSS generator for a high-def glass effect
#65i 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
#66Earlier 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.
Does it matter at that point? Seriously asking.
Re: Show HN: CSS generator for a high-def glass effect
#67Earlier 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.
Re: Show HN: CSS generator for a high-def glass effect
#68Earlier 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.
Re: Show HN: CSS generator for a high-def glass effect
#69That 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?