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

91–100 of 125 posts

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

#91

Post by Sander_Marechal »

adamschwartz wrote: post #85

I’m confused, but maybe two wrongs here do make a right. Please allow me to explain. Putting aside for the moment that I personally find Apple’s iOS 26 design objectionable[1], I don’t understand why `backdrop-filter: blur` is the focus of recent implementations jumping on the Liquid Glass hype train. Using background blur to create UI layer separation (often in combination with darkening/saturation or other contrast…

None of your linked examples work on Firefox :-( We're back in the IE6 days again, aren't we...

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

#92

Post by incrudible »

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…

> 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

Good. I was already on the fence about frosted glass, but I absolutely hate the refraction effect, it is super distracting and will always look ugly in certain scenarios. Yes, it is how real glass behaves, but I do not care for that. It is like someone took the worst part of skeumorphism and doubled down on it, and I say that as someone who liked iOS better before version 7.

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

#93

Post by nothrabannosir »

andrewmcwatters wrote: post #77
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.

Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web. I instead assume that materials are by default more similar to paper.

That article covers a bug in implementations of blurring in browsers. It shows how when a 200px red circle is fully covered by a blur with radius 16px, today you will see a 232px sized blurred circle. But when the circle is shifted down from under the blur, so there is one pixel of space separating the two, you would still expect to see 15 px of blurred red circle. Instead it goes 18, 17, 16, 0, 0, for every successive frame. That’s a bug.

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

#94

Post by smeej »

I might be missing something, but I think this would be a lot more useful to me on mobile if I could hide or collapse the box. Instead, it takes up the entire screen and I can't really even see the effect behind it. I'm still interested enough that I'll probably try it again later on a larger screen, but I think some kind of option to hide the box would go a long way!

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

#96

Post by [deleted] »

smeej wrote: post #94

I might be missing something, but I think this would be a lot more useful to me on mobile if I could hide or collapse the box. Instead, it takes up the entire screen and I can't really even see the effect behind it. I'm still interested enough that I'll probably try it again later on a larger screen, but I think some kind of option to hide the box would go a long way!

[deleted]

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

#97

Post by chrismorgan »

nothrabannosir wrote: post #93
andrewmcwatters wrote: post #77

Earlier quoted context omitted.

Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web. I instead assume that materials are by default more similar to paper.

That article covers a bug in implementations of blurring in browsers. It shows how when a 200px red circle is fully covered by a blur with radius 16px, today you will see a 232px sized blurred circle. But when the circle is shifted down from under the blur, so there is one pixel of space separating the two, you would still expect to see 15 px of blurred red circle. Instead it goes 18, 17, 16, 0, 0, for every successi…

It’s not an implementation bug, it’s a deliberate design limitation in the name of performance. (There are quite a few practical limitations on backdrops in the name of performance.)

It’s not impossible that this will be adjusted in the future in some way, like how browsers quite some years ago shifted to premultiplying colours so that a gradient from white to transparent doesn’t go through semitransparent grey, but browsers are acting according to spec.

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

#98

Post by andrewmcwatters »

chrismorgan wrote: post #89
andrewmcwatters wrote: post #77

Earlier quoted context omitted.

Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web. I instead assume that materials are by default more similar to paper.

The backdrop blur is unrelated to the surface properties of the elements underneath: it’s about the frosted glass refracting light, and some of that light it refracts comes from beyond its bounding box, which a naive backdrop-blur won’t observe.

Frosted glass doesn’t pass through light of objects that are simply near by it. It doesn’t make physical sense. I understand the defect, but neither does this solution correctly fix the problem.

Note the circle before it intersects with the rect, without accounting for pixels beyond the bounds, the blur is incorrect because the kernel doesn’t take into effect the circle.

Note the blur after extending the kernel beyond the visible bounds. While the blur is correct, the albedo of the shape passing through the rect no longer makes sense. The circle is not emissive, and yet despite this, you see the blur of the circle behind the rectangle without it intersecting in a full-bright environment. Why can we assume the environment is full-bright? Because there is no lighting. Only albedo.

Neither are correct.

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

#99

Post by andrewmcwatters »

nothrabannosir wrote: post #93
andrewmcwatters wrote: post #77

Earlier quoted context omitted.

Josh’s solution also intuitively appears wrong to me because it seems to assume that nearby elements are emissive, and I can’t agree with that as a standard physical property of “materials” on the web. I instead assume that materials are by default more similar to paper.

That article covers a bug in implementations of blurring in browsers. It shows how when a 200px red circle is fully covered by a blur with radius 16px, today you will see a 232px sized blurred circle. But when the circle is shifted down from under the blur, so there is one pixel of space separating the two, you would still expect to see 15 px of blurred red circle. Instead it goes 18, 17, 16, 0, 0, for every successi…

It’s an implementation limit of a limited backing layer size. So no, it’s not a bug. But neither solution correctly blurs objects that insect with the layer.
Post reply on HN