玻璃拟态
Glassmorphism
别名:毛玻璃苹果那种透明玻璃效果玻璃拟态磨砂玻璃玻璃效果半透明模糊背景Frosted GlassGlassmorphism UI
这是什么
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
开发规格
字体
无衬线，白色大标题
色彩
蓝紫粉渐变底 × 白色玻璃 rgba(255,255,255,.45)
边框
1px 半透明白边框
阴影
大范围柔和彩色投影
间距
圆角 16px+，卡片内边距充足
动效
200–300ms ease-out 的位移与模糊过渡，尊重 prefers-reduced-motion
状态反馈
hover 提升透明度与模糊并轻微上浮；focus 用白色可见亮环；active 压低光晕；disabled 降不透明并去模糊；error 用红调玻璃且仅淡入颜色
风格演示
先看整页效果，再试交互场景整页预览
让灵感
自然流动
Aurora 是一款全新的 AI 创作工具，
在想法与现实之间，创造更短的距离。
激发创意，辅助创作
随时随地，灵感不丢失
连接你的工作流
好的创意
值得被看见。
A brighter tomorrow.
交互场景
正在加载演示…
✓ 适用场景
- 背景是渐变 照片或彩色内容，需要透出层次
- 弹层 播放器 系统级悬浮面板，要轻盈不要沉闷
- 想延续 macOS iOS 的材质语言获得熟悉感
✕ 不适用场景
- 背景纯净单调，玻璃无内容可透 出来只剩灰雾
- 长文本密集区域，模糊底会持续削弱文字对比度
- 低端设备兼容与性能敏感场景，backdrop-filter 开销大
常见形式
磨砂
Frost
高模糊低透明，最经典的奶白玻璃
透明玻璃
Clear Glass
低模糊高透明，更依赖高光描边
有色玻璃
Tinted Glass
带色调的玻璃，iOS 振动感传统
实现要点
backdrop-filter: blur()background: rgba(255,255,255,0.1~0.4)border: 1px solid rgba(255,255,255,0.4)box-shadow: inset 0 1px 0 rgba(255,255,255,0.5)@supports玻璃三要素：半透明填充（白色 10%～40% 透明度）、backdrop-filter blur(8~24px)、 顶部 1px 半透明白描边制造玻璃厚度。深色底上玻璃效果最典型，可再叠一层顶部 内发光。务必用 @supports 为不支持 backdrop-filter 的环境准备降级（提高填充 不透明度）。文字对比度要按模糊后的实际背景校验。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用玻璃拟态风格（Glassmorphism）实现一个悬浮卡片 + 按钮区块。 先检查现有 Design Token 与弹层组件，确认背景层方案（渐变/图片）。 要求： - 页面层提供彩色渐变背景，玻璃面板半透明 + backdrop-filter blur - 1px 半透明白描边与顶部高光内阴影表现玻璃厚度 - @supports 降级：不支持时提高面板不透明度保证可读 - 深色模式使用更深渐变底（玻璃在深底上最典型） - 玻璃上的文字对比度满足可读性要求 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
风格相似概念以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件影响组件