毛玻璃生成

怎么用

1. 拖动模糊设定背景被虚化的程度。12 到 20 px 左右最接近磨砂玻璃的观感。
2. 调透明度控制底色层。数值越低背景越透，越高面板越乳白。
3. 模糊把背景颜色冲淡时，把饱和度提到 100% 以上。
4. 调边框宽度与边框不透明度。一道极细的浅色边框，是毛玻璃与普通半透明色块的分界。
5. 选好底色后复制 CSS。代码片段里带 @supports 回退，不支持时会改成纯色背景。

常见用法

• 在头图上叠面板 —— 毛玻璃卡片能保证文字可读，又不挡住图片。
• 吸顶导航栏 —— 半透明栏滚动时会虚化身后的页面内容。
• 弹窗与对话框 —— 毛玻璃面板看起来是浮在页面之上的一层，而不是一块平面矩形。
• 定价与功能卡片 —— 在渐变背景上盖一层浅色，不用额外素材就有层次。
• 快速试设计方向 —— 先在这里把数值定下来，再写进设计变量。

常见问题

问：预览为什么要用花哨的背景？ 答：纯色背景没有东西可虚化，backdrop-filter 就看不出效果。预览用渐变加色块，模糊才看得见。

问：Firefox 能用吗？ 答：新版 Firefox 支持 backdrop-filter。旧引擎会忽略它，所以代码片段带了 @supports 回退，改用纯色背景。

问：深色背景上的文字为什么还是浅色？ 答：预览卡片固定用白色文字，保证在示例渐变上看得清。换成你自己的配色时请相应调整文字颜色。