背景模糊
backdrop-filter: blur(15px) 将身后的霓虹渐变揉成柔和色雾，形成磨砂玻璃质感。
- 类别通用风格
- 年代2020s Modern
- 复杂度中等
- 最适合现代 SaaS · 金融仪表盘 · 导航浮层
三个视觉支柱
玻璃拟态的辨识度来自模糊、透明与层叠三者的配合，缺一不可。
多层景深
半透明卡片按 z-index 层层叠放，透出彼此的轮廓，营造真实的空间纵深。
亮边反光
1px 半透明白描边加顶部内阴影，模拟光源打在玻璃边缘的高光反射。
按钮与控件
悬停轻浮起、按下轻回落，250ms 的过渡保持玻璃的轻盈手感。
按钮状态
开关与徽标
玻璃质感已开启
表单示例
输入框沿用玻璃底与亮边，聚焦时以天蓝色焦点环给出明确反馈。
配色板
半透明玻璃白为主体，四种高饱和霓虹色负责背景光晕。
- 玻璃白
rgba(255,255,255,.15) - 电光蓝
#0080FF - 霓虹紫
#8B00FF - 艳粉
#FF1493 - 青碧
#20B2AA
字体级阶
展示层使用 Outfit，正文使用 Inter，中文回退至苹方 / 微软雅黑。
玻璃之上，光影之间
多层半透明卡片的层叠秩序
磨砂玻璃让内容浮于色彩之上，模糊背景既保留了氛围，又不干扰阅读。
Frosted Glass / 磨砂玻璃