为什么设置了模糊却看不出效果？

最常见是背景色写成不透明色，把后面的内容盖住了；其次元素背后是纯色，没有可模糊的细节。把底色改成带透明度的 rgba，并换一张有明暗变化的底图再试。

旧浏览器上毛玻璃会怎样？

不支持 backdrop-filter 的浏览器会忽略该声明，只剩半透明底色，文字可能变难读。本页输出的 @supports 降级片段会在这种情况下把底色调实，保证内容可读。

GLASS STUDIO 玻璃橱窗 / 02

毛玻璃生成器

Q: backdrop-filter 和 filter 有什么区别？

filter: blur() 模糊元素自身及子内容；backdrop-filter: blur() 模糊元素背后已绘制的背景，元素文字与图标保持清晰。毛玻璃效果用的是后者。

Q: 模糊半径一般设多少？

卡片类界面常用 10 到 20px，全屏遮罩可以放到 24 到 32px。数值越大越吃性能，滚动容器里叠加多层玻璃时尤其明显，建议从 14px 的预设开始微调。

Q: 能同时加饱和度和亮度吗？

可以。backdrop-filter 支持多函数串联，例如 blur(14px) saturate(160%) brightness(1.05)。本页按这个顺序拼接，并同步生成带 -webkit- 前缀的同一串值。

调 backdrop-filter 最怕凭感觉。把模糊、饱和度、亮度、底色透明度摊成四根滑杆，压在真实背景上边拖边看，右侧直接给出能粘贴的 CSS 与降级方案。

14模糊 px

150饱和度 %

18底色透明度 %

测试背景

GLASS CARD

半透明玻璃卡

玻璃层只模糊背后的内容，卡片上的文字依旧清晰。拖动右侧滑杆看看边缘与底色的变化。

blur 14pxalpha .18

预览文字可改：

生成代码

标准写法 + 兼容前缀

@supports 降级与 HTML

方案批量对照

方案名	模糊	饱和	亮度	透明度	描边	备注（转义后展示）

🪟backdrop-filter 口径函数串联、底色 alpha 与降级

属性口径	毛玻璃核心是 backdrop-filter: blur(Npx)，它模糊的是元素「背后」的内容，与 filter: blur() 模糊元素自身完全不同。
可叠加函数	backdrop-filter 支持 blur、saturate、brightness、contrast、grayscale 串联；本页按顺序拼接，并同时输出带 -webkit- 前缀的兼容写法。
底色透明度	背景色必须带 alpha（如 rgba(255,255,255,.18)），完全不透明会把模糊层盖住；本页把透明度做成独立滑杆，避免手写出错。
描边与层次	一层半透明白色 1px 边框加一道柔和内阴影，能显著提升玻璃边缘的可读性；页面提供描边开关与圆角、阴影参数。
降级方案	不支持 backdrop-filter 的环境会退化成纯半透明色块；页面给出 @supports 检测片段，保证文字对比度不失控。
批量与校验	模糊半径限定 0～40px、饱和度 0%～200%，超出范围会提示并夹回边界；批量表最多 12 组配色方案，导出按 CSV 转义规则处理。

这个工具解决什么问题

毛玻璃好不好看，取决于模糊、饱和度、底色透明度与描边四者的平衡。这个毛玻璃生成器用一张实时玻璃卡压在渐变背景上，拖动滑杆就能看到 backdrop-filter 的每一点变化，右侧同步输出可直接粘贴的 CSS。内置轻雾、深色面板、彩色玻璃、磨砂卡片四套预设，支持背景切换、兼容性前缀、@supports 降级、多方案批量对照与代码复制导出。

四条实用原则

模糊值别拉满：10～20px 通常足够，超过 24px 后背景细节全丢，玻璃感反而变成一层雾。
背景要有对比：纯色底几乎看不出毛玻璃，页面提供渐变、色块与几何纹理三种测试背景。
文字优先可读：深色玻璃配浅色字、浅色玻璃配深色字，必要时把底色透明度调高一档。
记得写降级：用 @supports 给不支持 backdrop-filter 的浏览器一个更实的底色。

按这几步用

选一套预设：首屏四张预设卡对应轻雾、深色、彩色与磨砂四种常见用法，点一下即套用。
换测试背景：在背景区切换渐变、色块或几何纹理，观察玻璃卡在不同底图上的表现。
调四项参数：分别拖模糊半径、饱和度、底色透明度与亮度，叠加描边、圆角、阴影。
复制 CSS 代码：代码区输出标准写法、-webkit- 兼容写法与 @supports 降级片段，可复制或下载。
批量对照与导出：把满意的方案存进批量表，横向比较参数差异，导出 CSV 或复制带参数的分享链接。

小提示

预览与代码全在浏览器本地生成，不上传任何样式；玻璃卡上的预览文字可自行修改，用于检查实际排版下的对比度。

更新记录

v1.0 2026-11-11 工具上线：实时 backdrop-filter 玻璃卡、三种测试背景、模糊/饱和度/亮度/透明度四滑杆、描边圆角阴影、标准与 -webkit- 双份代码、@supports 降级片段、四套预设、批量方案对照与 CSV 转义导出、URL 参数分享。

常见问题

backdrop-filter 和 filter 有什么区别？

filter: blur() 模糊的是元素自己以及它的子内容；backdrop-filter: blur() 模糊的是元素背后已经画好的背景，元素自身的文字与图标保持清晰。毛玻璃效果用的是后者。

为什么我设置了模糊却看不出效果？

最常见的原因是背景色写成了不透明色，把后面的内容完全盖住了；其次是元素背后本身是纯色，没有可模糊的细节。把底色改成 rgba 带透明度，并换一张有明暗变化的底图再试。

毛玻璃在旧浏览器上会怎样？

不支持 backdrop-filter 的浏览器会忽略这条声明，只剩半透明底色，文字可能变得难读。页面输出的 @supports 降级片段会在这种情况下把底色调实，保证内容可读。

模糊半径一般设多少？

卡片类UI常用 10～20px，全屏遮罩可以放到 24～32px。数值越大越吃性能，尤其在滚动容器里叠加多层玻璃时，建议先用页面里 14px 的预设再微调。

能同时加饱和度和亮度吗？

可以。backdrop-filter 支持多个函数串联，例如 blur(14px) saturate(160%) brightness(1.05)。本页按这个顺序拼接，并同步生成带 -webkit- 前缀的同一串值，避免只写一半导致 Safari 不生效。

批量对照表怎么用？

每调出一套满意的参数，点「加入对照」存一行；表格把模糊、饱和度、透明度、描边并排显示，方便在浅色卡片和深色卡片之间挑一套，最后可导出 CSV 或复制分享链接带回项目。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！