毛玻璃Glassmorphism
半透明面板叠加背景模糊，用 1px 亮边勾出玻璃厚度。层次感强、氛围轻盈，但文字对比度依赖背景，正文密集处需谨慎。
典型场景SaaS 后台 · 音乐/媒体应用 · 仪表盘浮层
编号03
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
半透明面板叠加背景模糊，用 1px 亮边勾出玻璃厚度。层次感强、氛围轻盈，但文字对比度依赖背景，正文密集处需谨慎。
关键词
Frosted glasstransparentblurred backgroundlayeredvibrant backgroundlight sourcedepthmulti-layer
效果与动效
Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth
设计系统变量
--blur-amount15px--glass-opacity0.15--border-colorrgba(255,255,255,0.2)--backgroundvibrant color--text-colorlight/dark based on BG配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Translucent white: rgba(255,255,255,0.1-0.3)
辅色 / Secondary
Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA
强调色在页面底色上的对比度约 4.0:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Modern SaaS
- financial dashboards
- high-end corporate
- lifestyle apps
- modal overlays
- navigation
避开 / Do Not Use For
- Low-contrast backgrounds
- critical accessibility
- performance-limited
- dark text on dark
框架兼容
tailwindmuichakra
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Backdrop-filter blur 10-20px,
- Translucent white 15-30% opacity,
- Subtle border 1px light,
- Vibrant background verified,
- Text contrast 4.5:1 checked
CSS / 技术关键词
backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth
AI 提示词
Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.