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.
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 <p> tags to get some text across, as just about everything else is used to make a webpage an ad-bomb. So let's just start again with the <p> tag and better gpu integration, and leave everything else out.
> 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...