液态玻璃
Liquid Glass
别名:液态玻璃苹果新玻璃厚玻璃折射玻璃透镜效果Liquid Glassrefractive glass UI
这是什么
用厚折射玻璃层、镜面高光与液体形变表示「功能浮层」的视觉语言。玻璃像一块厚透镜， 折射底下的内容并反射环境光，边缘带 lensing 变形；强调材质的体积与流动性。
开发规格
字体
系统无衬线，玻璃上的字重略轻
色彩
由底层内容决定玻璃色相，高光近白
边框
1px 半透明白描边，暗示折射边缘
阴影
顶部镜面内高光 + 大范围柔和外投影
间距
20px+ 圆角或胶囊，控制件独立浮层
动效
250–400ms ease-out 的折射位移与高光滑动，尊重 prefers-reduced-motion
状态反馈
hover 高光沿边缘滑动并轻微放大；focus 用白色可见亮环；active 压低折射；disabled 降透明去高光；error 用红调折射且仅淡入颜色
风格演示
先看整页效果，再试交互场景整页预览
让界面
变成一块厚玻璃
折射内容，反射环境，边缘会流动。
体验折射 →厚折射
像透镜
镜面高光
顶边一线光
边缘流动
lensing 变形
REFRACT. REFLECT. MORPH.
交互场景
正在加载演示…
✓ 适用场景
- 需要与系统级导航 控制条 浮层保持同一材质语言
- 底下是彩色照片或丰富内容，折射透出层次才有意义
- 想要「厚玻璃片」的体积感，而不是一层薄雾
✕ 不适用场景
- 长文本密集区，折射与高光会持续干扰阅读
- 低端设备与性能敏感场景，实时折射开销大
- 只需要轻量磨砂分层，那用玻璃拟态更省
常见形式
片状透镜
Sheet lens
大面积厚玻璃板，边缘 lensing 明显
胶囊按钮
Button capsule
小尺寸胶囊控制件，镜面高光集中
全幅面板
Full panel
侧栏 系统条级别大块玻璃，吸收环境色
实现要点
backdrop-filter: blur() saturate()box-shadow: inset 高光 + 外投影border: 1px solid rgba(255,255,255,0.5)background: rgba(255,255,255,0.12)border-radius: 999px厚度感来自三层：低透明填充 + backdrop-filter blur(20px) saturate(180%) + 顶部 1px 镜面高光内阴影 与底部暗边内阴影。边缘 lensing 近似用较厚的半透明白描边 + 外圈极浅放大后的底色。 真折射需要 SVG filter 或 canvas，Web 里通常用高光与饱和度补偿暗示。玻璃必须浮在彩色内容上。 深色模式用深色填充，高光保持。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现 Liquid Glass 液态玻璃视觉风格。 先检查现有弹层与导航组件，确认底层有可折射的彩色内容。 要求： - 厚玻璃：低透明填充 + backdrop blur/saturate + 顶部镜面高光 + 底部暗边 - 边缘用半透明白描边暗示 lensing，不用薄磨砂一片雾 - 控制件浮在独立功能层，玻璃不遮死底层内容 - @supports 降级为更实填充；深色模式保留高光 - 文字对比度按折射后的实际背景校验 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
风格搭配使用固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件影响组件覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件影响组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件容易混淆
玻璃拟态是薄磨砂模糊（backdrop blur 一片雾）；液态玻璃是厚折射透镜，边缘变形并带镜面高光。