毛玻璃效果生成器

功能

• 玻璃底色与不透明度分开调 —— 半透明是这套效果的根基
• 背景模糊 0–60px，实时预览
• 饱和度提升 100–300%，让玻璃后面的颜色更饱满
• 可开关的浅色边框，边框色与透明度都能调
• 圆角可调
• 同时输出 `backdrop-filter` 与 `-webkit-backdrop-filter`，iOS 上也能出现模糊
• 预览区背后是彩色底，模糊与饱和度才看得出来
• 下方给出可复制的完整 CSS 规则，带 `.glass` 选择器
• 参数都做过夹取与色值校验，不产出非法 CSS
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先调不透明度：太低看不见玻璃，太高就成了一块实心色
2. 再调背景模糊，观察预览区背后的彩色被揉开多少
3. 需要更「透亮」就提高饱和度提升
4. 觉得对了，点复制按钮把整段 CSS 拿走

常见问题

为什么我的毛玻璃在 iPhone 上没效果？

多半是少了 `-webkit-backdrop-filter`。Safari 到 18 才默认认标准写法，而它在移动端的份额不小 —— 所以工具生成的代码里两行都在。另外还有一个容易被忽略的前提：元素背后必须真的有什么东西（图片、色块、另一个元素）。如果它背后是纯白页面，模糊白色还是白色，看起来就像没生效。

`backdrop-filter` 和 `filter` 有什么区别？

一句话：`filter` 糊自己，`backdrop-filter` 糊背后。 给一个元素写 `filter: blur(12px)`，那个元素本身连同它的文字一起变模糊；写 `backdrop-filter: blur(12px)`，元素自己是清晰的，而它背后透出来的内容被模糊了 —— 后者才是毛玻璃。两者可以同时用（比如背后模糊、自己再轻微调整），但别把 `filter` 当成毛玻璃的写法。

不透明度调到多少合适？

通常在 10% 到 30% 之间。低于 10% 时玻璃几乎消失，边框与圆角的轮廓会变得没有依托；高于 30% 就越来越像一块普通的不透明色块，背后的内容看不清，「玻璃」的感觉也就没了。具体取值还要看背后内容的对比度：背后越是花哨，不透明度就该越低（让更多内容透出来），同时靠边框来维持轮廓。

这效果有性能代价吗？

有，而且比看上去大。 `backdrop-filter` 要求浏览器把元素背后的区域单独取出来做一次模糊，这在滚动或动画时是持续的开销 —— 多个毛玻璃元素叠加时尤其明显，低端机上容易掉帧。实践建议：一屏里别放太多，别让它在滚动过程中大面积移动，也别给毛玻璃元素本身加动画。它适合做固定位置的浮层（导航栏、卡片），不适合做满屏滚动的背景。

毛玻璃上的文字可读性怎么保证？

这是这套风格最大的坑：背景模糊之后，文字底下的明暗是不确定的 —— 同一个导航栏，滚过浅色图片时文字清楚，滚过深色图片时就糊了。几个实用做法：一是给毛玻璃层本身加一点整体的深色或浅色倾向（把底色从纯白改成带一点主色的白），让文字与它的对比度更稳定；二是给文字加轻微的 `text-shadow`；三是最笨也最可靠的 —— 直接测试最亮与最暗的滚过内容，两处都能读才算过。