Comment by diiiimaaaa
7 days ago
Similar thing happened in iOS7(?) where they released glassy panels. Not far from that `-webkit-backdrop-filter` was added that allowed similar effect, I expect similar will happen. For new glassy effect it seems you need a separate filter for border, or maybe it's just gradient + blend mode.
Refraction effects like that require a surface normal, even inferred from something like a bump map, or the result of a blur filter used as a bump map. I'm not aware of any CSS filter that could take a normal and do the appropriate ray redirection.
In raw shader code it's verging on trivial, like old school environment mapping. https://en.wikipedia.org/wiki/Reflection_mapping
The lighting is depending on the devices' orientation to which a web site running in safari on iOS has no access to due to fingerprinting protection. Maybe you need to request permissions to the gyroscope, but doing that for a reflection in the UI is a bit overkill.