液态玻璃是什么？
苹果在 WWDC 2025 发布的半透明界面材质 Liquid Glass——它实际上是什么、从哪里来， 以及它和在它之前流行的玻璃拟态到底差在哪里。
最后校订: 2026年8月3日
一句话回答
液态玻璃是一种材质，不是配色方案，也不是一个滤镜。它是苹果在 WWDC 2025 发布、随后铺满 iOS 26、iPadOS 26、macOS 26 Tahoe、watchOS 26、 tvOS 26 和 visionOS 26 的那层半透明表面——自 2013 年 iOS 7 把一切扁平化以来， 苹果最大的一次视觉改版。
它和此前所有「磨砂面板」的区别在于：它的行为是光学的。它不是把背后的内容 糊掉，而是像真实透镜那样把内容折弯；它会接住随设备倾斜而移动的高光； 它自身的色调和阴影会随着底下滑过的内容变化。内容一动，玻璃就有反应。 与其说它是一个 CSS 效果，不如说它是一个被模拟出来的物理对象。
中文里怎么称呼它
苹果简体中文官网把 Liquid Glass 译作「液态玻璃」， 繁体中文写作「液態玻璃」。开发者文档和 WWDC 场次标题仍然用英文原名， 所以中文技术讨论里中英混用很常见，两种写法指的是同一件事。
有三个容易混淆的词，值得先分开：
- 玻璃拟态（glassmorphism）——更早、更宽泛的那个视觉风格， 中文里也常叫「毛玻璃效果」或「磨砂玻璃效果」。它和液态玻璃不是一回事， 下面单开了一节讲两者的差别。
- 亚克力材质（Acrylic）——微软 Fluent Design 里的对应物。 同样是半透明面板，但建立在噪点与模糊之上，不做折射。
- 液态金属、非晶合金——完全无关的材料学概念，只是名字像。
还有一个歧义值得提醒：「液态玻璃」在化工领域另有所指，是硅酸钠溶液的俗称 （也叫水玻璃、泡花碱），一种做涂层和黏合剂的原料。搜这四个字出来的结果里， 有相当一部分是防水涂料而不是界面设计。这篇文章讲的是后者。
它从哪里来
苹果在 2025 年 6 月 9 日的 WWDC 上首次展示了它，同一场发布会还把所有操作系统 改成了按年份编号——所以是 iOS 26 而不是 iOS 19。有两个场次专门讲了它：Meet Liquid Glass 和 Build a SwiftUI app with the new design。
但它的来历比一场发布会长得多。你可以把液态玻璃理解成苹果把自己二十年的实验 收拢到了一处：早期 Mac OS X 里 Aqua 的光泽与纵深、iOS 7 带来的实时背景模糊、 iPhone X 手势和灵动岛那套流体动效，以及最直接的来源——visionOS 的玻璃面板， 那里的界面表面必须能可信地待在一个真实房间里。液态玻璃就是那种 visionOS 材质 被搬回了平面屏幕。
它的口碑并非一边倒。早期测试版因为可读性问题挨了持续的批评，苹果在 26.1 系列更新里补上了削弱这个效果的开关——在默认的清透外观之外增加了一种更不透明的 着色外观，这还是在系统原有的「降低透明度」和「增强对比度」辅助功能之上。 在你整套照搬这个视觉之前，这段历史值得知道。
苹果自己关于如何采用它的指引，在 人机界面指南（HIG）里。
液态玻璃与玻璃拟态的区别
这两个词经常被混着用，但它们不是一回事。
玻璃拟态（glassmorphism）是更早也更宽泛的那个词， 由设计师 Michal Malewicz 在 2020 年 11 月提出，几周之内传遍全网。 它描述的是一种外观：一块半透明面板、面板背后的背景被模糊、 一圈发丝般的亮边勾出轮廓、一层柔和的投影把它托起来。在网页上， 它就是四条 CSS 属性——backdrop-filter: blur()、半透明背景、低透明度描边、一个 box shadow。它是静态的： 面板静止时和动画中途的模糊完全一样。
液态玻璃是苹果在 2025 年把这个想法推向动态的结果。 真正关键的那句区别是：玻璃拟态模糊它背后的东西，液态玻璃折射它。再加上会跟随设备运动的镜面高光、随底下内容变化的色调与阴影， 以及随界面变化彼此形变、融合的形状——你得到的是一种逐帧模拟出来的材质， 而不是一次性声明好的样式。
实际情况是：网上以「液态玻璃」名义发布的网页作品，大部分其实是打光更好的玻璃拟态。 要在浏览器里做出真正的折射，需要位移贴图或着色器，靠backdrop-filter 是做不到的。两类在 UI 作品集里都有不少，知道该看边缘之后就很容易分辨——真折射会把面板背后穿过的直线扭曲掉。
它是怎么做出来的
在苹果平台上，这件事基本是现成的。SwiftUI 里用 .glassEffect() 修饰符就能把这种材质应用到 自定义视图上；GlassEffectContainer 把多个玻璃形状归成一组，让它们彼此混合、受同一套光照、并能互相形变—— 这同时也是更省性能的路径，因为容器是把整组渲染一次，而不是每个形状各渲染一遍。
网页上没有对等的原生能力，只能重建这个效果。目前流行的做法，大致按还原度排序：
- 纯 CSS——
backdrop-filter配合分层的描边和高光。成本低、兼容性好，但止步于玻璃拟态：没有折射。 - SVG 滤镜——用渐变驱动
feDisplacementMap，在边缘把背景折弯。 不用 WebGL 就能做出真折射。参见 Liquid Glass SVG filters。 - WebGL / 着色器——最接近的一档，毕竟折射、色散和高光 本来就是片元着色器的本职工作。Liquid Glass Studio 是目前最完整的网页复刻；Liquid Glass Vue 是同一思路下一个更小的 Vue 3 实现。
- 框架组件——已经封装好的实现，有 React 版和 Flutter 版；设计阶段则可以用 Figma 里的原生玻璃效果。
上面这些全都收在 资源里。
用它做设计
翻车方式高度一致且可预测：玻璃上的文字一旦压在花哨的背景上，就没法读了。 苹果自己撞得够公开，以至于在一次小版本更新里补上了不透明度开关。 如果你只从 HIG 里带走一条原则，就带这条——玻璃是给浮在内容之上的那一层用的，不是给内容本身用的。工具栏、标签栏、浮层、控件可以坐在玻璃上， 正文不行。
还有两条值得内化。第一，对比度不是可选项：拿每一块玻璃表面去对最花哨的那个背景 做检查，而不是挑一个方便的；把「降低透明度」当作要认真支持的设置，而不是边缘情况。 第二，克制本身会被读成「有意为之」——真正站得住的界面只在一到两层上用玻璃， 其余保持实心。玻璃叠玻璃叠玻璃，看上去就像个 demo。