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

11–20 of 125 posts

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

#11

Post by elpocko »

rpastuszak wrote: post #9
elpocko wrote: post #8

Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using `backdrop-filter: blur`. Or am I missing something?

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.

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

#12

Post by swyx »

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.io/TurkAysenur/pen/ZEpxeYm)

  ```css
  .blur-and-rotate {
    border-radius: 20px;
    backdrop-filter: blur(20px) hue-rotate(120deg);
    -webkit-backdrop-filter: hue-rotate(120deg);
  }
  ```

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

#13

Post by gumby271 »

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

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

#15

Post by kris-kay »

mbforbes wrote: post #2

Really nicely done! It's always surprising to me how often computer graphics isn't "one weird trick" and more like "5 layered tricks." Doing it with cross-browser compat is an additional challenge. Do you have a sense of which aspects are the most resource-intensive? Naively I would guess it's the backdrop-filter.

Yes, same! I didn't expect it to need so many tricks to implement. Your intuition is correct, the most resource-intensive part is the blur bit of the backdrop-filter. The higher the blur value, the more neighbouring pixels need to be "consulted" before rendering. Another resource-intensive aspect is continuous repaint as you scroll or as a video background changes the look of the glass.

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

#18

Post by kris-kay »

elpocko wrote: post #8

Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using `backdrop-filter: blur`. Or am I missing something?

You're right, glassmorphism dates back to the early years of this millennium. For instance, Project Looking Glass(2003) attempted an entire desktop environment that resembled slabs of glass that could be turned over in 3D space!

Even so, I haven't found another glass generator that has a texture layer and box-shadow bevel, etc.

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

#19

Post by kris-kay »

rpastuszak wrote: post #9
elpocko wrote: post #8

Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many websites, using `backdrop-filter: blur`. Or am I missing something?

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.

The 2000 CE bit made me laugh! And yes, Windows Vista was a proper nightmare.
Post reply on HN