用纯 CSS 重现苹果的液态玻璃效果 ✨

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

昨天，苹果在 WWDC 2025 大会上发布了一款令人惊艳的产品。正当大家都在翘首期盼人工智能的下一个突破时，蒂姆·库克却出人意料地推​​出了 iOS 26，其中采用了全新的“液态玻璃”设计语言。这一设计革新灵感源自苹果的 VR 头显 Vision Pro，为所有苹果设备带来了半透明菜单、光泽图标和圆润的控件。

但我们开发者就是这样——当苹果公司展示一些闪亮的新功能时，我们总会忍不住想：“我肯定能用 CSS 做出来。” 🤓

所以，与其等待 iOS 26，我决定完全使用 HTML 和 CSS 来重现苹果的 Liquid Glass 效果。没有 JavaScript，没有复杂的框架——只有纯粹的网页魔法。

是什么让液态玻璃如此特别？

苹果的Liquid Glass采用实时渲染技术，并能通过镜面高光动态响应用户动作，打造出栩栩如生、响应灵敏的界面。其特性包括闪亮、反光和透明的视觉界面元素，赋予软件更加“玻璃质感”的外观和触感。

关键在于结合多种 CSS 技术，以实现透明度、深度和微妙的“流动”质感之间的完美平衡，从而使一切感觉都具有高级感。

揭秘 CSS 的奥秘

1. 基础：玻璃的创造

这种效果的核心在于结合使用多个 CSS 属性：

.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

以下是各项属性的功能：

• backdrop-filter: blur()营造出那种磨砂玻璃般的模糊效果
• rgba()背景提供半透明图层
• inset box-shadow增添内在光泽和深度
• border: rgba()形成微妙的玻璃状边缘

2. 液态触感：伪元素魔法

真正的秘诀在于::after产生液体光泽的伪元素：

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}

这样就产生了微妙的高光和反射，使玻璃看起来像“液体”一样——仿佛光线在表面流动。

跨浏览器兼容性

该效果在支持以下功能的现代浏览器上效果极佳backdrop-filter：

• ✅ Chrome、Firefox、Safari、Edge
• ❌ Internet Explorer（但说实话，你上次担心IE是什么时候？）

对于旧版浏览器，您可以提供备用样式或使用 polyfill。

自己动手试试

想看看实际效果吗？我制作了一个在线演示，您可以亲自体验一下：

接下来是什么？

这仅仅是个开始！液态玻璃效果为现代网页设计开辟了无限可能。您可以轻松地将这项技术应用于：

• 导航菜单
• 模态对话框
• 仪表盘小部件
• 移动应用界面
• 着陆页部分

关键在于找到视觉吸引力和易用性之间的平衡——就像苹果公司所做的那样。

总结

在等待 iOS 26 正式发布之际，我们不妨先将苹果的一些神奇设计理念运用到网页上。有时候，了解新设计趋势的最佳方法就是亲自动手实践。

CSS 的魅力在于它赋予我们重现最复杂设计系统的能力。谁知道呢？也许你的下一个项目会让用户眼前一亮，不禁疑惑：“等等，这是原生应用还是网站？”

🔗 资源与参考资料

• 在线演示
• GitHub 仓库
• CodePen 示例
• 玻璃态生成器
• 背景图片来自Unsplash

用❤️和CSS魔法打造

你觉得苹果的新设计方向怎么样？你打算在你的项目中尝试液态玻璃效果吗？请在下方评论区留言！👇