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

51–60 of 125 posts

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

#51

Post by kris-kay »

tempodox wrote: post #42
kris-kay wrote: post #16

Earlier quoted context omitted.

Thanks! Do you mean how the glass or how the video background is done?

The background.

So you need a video HTML tag with all of these attributes:

and the CSS: .bg-video { position: fixed; z-index: -1; inset: 0; width: 100%; (don't set this to 100vw or you will have scrollbar issues) height: 100%; min-height: 100vh; object-fit: cover; object-position: center; pointer-events: none; }

The part I still need to do myself is provide multiple video sizes and show the one that's most suitable for the viewport.

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

#55

Post by kris-kay »

CharlesW wrote: post #14
thecosas wrote: post #4

I can see people using this to have their websites (or apps) fit into the design of Apple's OS 26 design language. Neat!

FWIW, this looks nothing like the iOS 26 (which I’ve been using on my primary phone) Liquid Glass effects.

True, but it wasn't meant to. I installed the 2nd beta on my phone as well and like it so far.

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

#56

Post by kris-kay »

andrewingram wrote: post #36
alberth wrote: post #34

I'd be concerned about the maintenance overhead of this ~44-lines of code vs. just 1-line of code that has a similar (while slightly less realistic) net effect: filter: blur(16px);

I’m curious why. I’d have concerns about the performance of this effect, but 44 lines of CSS to achieve a higher level of polish and, dare I say, craft, doesn’t seem like something to be dismissive of at review stage.

Thanks for stating my side of this trade-off and for the nice feedback!

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

#58

Post by madeofpalk »

ivape wrote: post #38
magic_hamster wrote: post #10

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…

If it can't be done with CSS, then how can it be done? How can you apply GPU shader effects to a common div? If we can't apply GPU effects to basic HTML and need to do so on custom things like an arbitrary Canvas concoction, then we may as well rebuild a brand-new rendering engine that can apply GPU effects. HTML is dead. I see no reason to care about it because we only need tags to get some text across, as just abou…

> we may as well rebuild a brand-new rendering engine that can apply GPU effects.

They've been trying, with various degrees of success, over the past 10 years with Houdini.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_propert...

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

#59

Post by kris-kay »

mikedelfino wrote: post #46

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?
Post reply on HN