浏览器中的液态玻璃：使用 CSS 和 SVG 实现折射效果

Apple introduced the Liquid Glass effect during WWDC 2025 in June—a stunning UI effect that makes interface elements appear to be made of curved, refractive glass. This article is a hands‑on exploration of how to recreate a similar effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations.

Apple 在 2025 年 6 月的 WWDC 上推出了 Liquid Glass 效果——一种惊艳的 UI 效果，让界面元素看起来像是用弯曲的折射玻璃制成。本文是一次动手探索，教你如何使用 CSS、SVG 置换贴图和基于物理的折射计算，在网页上重现类似效果。

Instead of chasing pixel‑perfect parity, we’ll approximate Liquid Glass, recreating the core refraction and a specular highlight, as a focused proof‑of‑concept you can extend.

我们不再追求像素级完美，而是近似实现 Liquid Glass，重现核心折射和高光亮点，作为一个可扩展的聚焦概念验证。

We'll build up the effect from first principles, starting with how light bends when passing through different materials.

我们将从第一性原理开始逐步构建效果，首先了解光在不同材料中传播时的弯曲方式。

The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter).

末尾的互动演示目前仅在 Chrome 中可用（因为使用了 SVG filters 作为 backdrop-filter）。

You can still read the article and interact with the inline simulations in other browsers.

您仍可在其他浏览器中阅读文章并与内联模拟互动。

#Understanding Refraction

Refraction is what happens when light changes direction as it passes from one material to another (like from air into glass). This bending occurs because light travels at different speeds through different materials.

Refraction 是指光从一种介质进入另一种介质时方向发生改变的现象（例如从空气进入玻璃）。这种弯曲发生的原因是光在不同介质中的传播速度不同。

The relationship between the incoming and outgoing light angles is described by Snell–Descartes law:

入射角与出射角之间的关系由 Snell–Descartes law 描述：

n1sin⁡(θ1)=n2sin⁡(θ2)n_1 \sin(\theta_1) = n_2 \sin(\theta_2)n1sin(θ1)=n2sin(θ2)

n1=refractive index of first mediumn_1 = \text{refractive index of first medium}n1=refractive index of first medium

n1=refractive index of first mediumn_1 = \text{refractive index of first medium}n1=第一种介质的折射率

θ1=angle of incidence\theta_1 = \text{angle of incidence}θ...