Liquid Glass in the Browser: Refraction with CSS and SVG

Liquid Glass in the Browser: Refraction with CSS and SVG

摘要

苹果在WWDC 2025推出了Liquid Glass效果，模拟曲面玻璃的折射视觉效果。本文通过CSS、SVG位移图和物理折射计算，展示了如何在网页上实现类似效果。核心在于光线穿过不同材料时的折射原理，结合Snell定律和四种表面函数，模拟光线弯曲。借助SVG位移图，将折射效果转化为浏览器可渲染的图像，最终在Chrome中实现动态UI组件的玻璃效果。