网页上的「液态玻璃」效果：让 UI 透出真实光影，跨浏览器零依赖实现

昆仑开源易选

2026-06-25 0 5

你是否见过 macOS 或 iOS 中那种微微折射、边缘泛光、背景内容依然可交互的「液态玻璃」（Liquid Glass）效果？现在，它终于原生登陆网页了！liquid-glass 是一个轻量、精准、真正“活”的液态玻璃 React 组件——它不是截图模糊，不是静态滤镜，而是用 SVG 位移滤镜实时折射真实的 DOM 元素，让文字仍可选中、链接依旧可点击、滚动保持同步，且在 Chrome、Safari 和 Firefox 上表现一致。

核心功能

真·实时折射渲染：基于 SVG <filter> 的 displacement map 技术，直接作用于真实 DOM 节点，而非截图或 canvas 静态快照，背景内容永远鲜活、响应式、可交互
全浏览器兼容：告别 Chromium 专属的 backdrop-filter: url() 黑箱方案，在 Safari 和 Firefox 中同样呈现细腻折射与柔光边缘，无需降级 fallback
零运行时依赖：不引入 WebGL、canvas 渲染库或第三方滤镜引擎；仅依赖 React（peer），体积极小，开箱即用
完全保留语义与可访问性：子元素（如按钮、文本、表单）保持原生 DOM 结构，屏幕阅读器可读、键盘焦点正常、SEO 友好
样式自由，无缝集成：支持任意 CSS 类名、Tailwind 类、内联 style；圆角、透明度、边框、阴影等均可通过标准 CSS 控制
光学参数可调：通过 optics 属性精细调节折射强度、边缘辉光宽度、色偏倾向等视觉参数，适配不同设计语言

适合哪些人用

这款工具特别适合追求极致体验的前端开发者与 UI 设计师：
• 正在构建 macOS/iOS 风格 Web 应用（如 Dashboard、控制台、设计工具）的团队；
• 希望在产品中加入高级视觉反馈（如悬停折射、模态窗毛玻璃、卡片浮层）但又拒绝牺牲性能与可访问性的工程师；
• 对跨浏览器一致性有强要求，不愿为 Safari/Firefox 单独维护一套降级样式的项目负责人；
• 使用 Vite、Next.js、Remix 等现代 React 生态栈，重视 bundle 体积与构建速度的开发者。

快速上手

安装只需一条命令（React 已作为 peer dependency，请确保项目中已安装）：

npm install @samasante/liquid-glass

使用方式极简：导入 Glass 组件，包裹任意 JSX 内容即可。例如：

import { Glass } from "@samasante/liquid-glass";

<Glass 
  style={{ 
    background: "rgba(248, 113, 113, 0.4)", 
    borderRadius: "14px", 
    padding: "12px 22px" 
  }}
>
  <button>保存设置</button>
</Glass>

无需全局 Provider、无需额外 CSS 文件、无需配置文件——写在哪，玻璃效果就出现在哪。