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

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.

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 find all the features. The number of times that there's an action button in some corner that folks don't see massive. Motion sort of helps highlight the chrome vs content, but there's just so little thats visually defining.

Liquid Glass's biggest strength IMO is the edge distortion. That when the content moves, there's this non-linear motion that the human visual sense immediately picks up on. Static screenshots don't always look great, but in motion there's so much more distinction of elements than anything else I've seen.

And that key refractive element, that takes such huge advantage of human's motion sensing, is missing here.

I'd seen one other great web web demo, but am struggling to find it right now. I did find this one, which I don't think looks as good, and the performance is bad for me here on mobile. But it nicely breaks down steps and shows how complex a task this can be. Getting these edge distortions in is hard, and relying on SVG filters to do it is a brutal path to hack together. https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...

There is a collection of attempts (CodePen Spark) at Liquid Glass that I just found. Second link is one I thought did a pretty nice job, via very specifically pre defined / hard coded SVG. https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

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 it feels like a simple drop shadow. It makes the box feel like a flat card more than a 3d physical object which I think is part of the new trend.

Either way, This will not be easy to emulate with just css, it's probably more suitable to be a shader running in a gpu.

This looks like it uses similar techniques to my own glass implementation: https://news.ycombinator.com/item?id=42225481

Especially with respect to the abuse of box shadow.

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);
  }
  ```

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?

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.

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

Wow, that Video tab looks gorgeous. I still don't understand yet how it's actually done.

> This project is the result of months of experimenting [..]

It shows, this is awesome, especially that rice paper effect!

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?

It looks so much better with some texture!