粘到我的页面里为什么没效果？

两个最常见的原因：(a) 元素背后是纯色，没有内容可模糊；(b) 祖先元素上有 `filter`、`transform` 或 `backdrop-filter` 造成的层叠上下文，在某些浏览器里会让内层的 `backdrop-filter` 失效。另外确认前缀没被构建工具删掉——本工具已经生成 `-webkit-` 版本。

不支持的浏览器会怎样？

会退化成半透明背景（`background: rgba(...)` 仍然生效），只是不模糊。这也是本工具把「底色」与「模糊」分成两个参数的原因：不支持毛玻璃的浏览器至少还看得清内容。

毛玻璃效果生成器

调节模糊、透明度与高光边框，生成 glassmorphism 卡片样式

返回工具列表

工具面板

本地处理

关于毛玻璃效果生成器

调节背景模糊、饱和度、底色透明度与高光边框，预览铺在彩色底上——纯色背景看不出毛玻璃效果。输出带 -webkit- 前缀，Safari 同样可用。

1
一次生成整张卡片的声明：底色与不透明度、模糊（0–40px）、饱和度、边框亮度、圆角，五项参数对应五行 CSS。
2
**同时输出 `-webkit-backdrop-filter`**：Safari 16 仍只认带前缀的写法，漏掉它在苹果设备上就退化成一块普通半透明色。
3
毛玻璃的本质是「模糊背后的内容」：预览里特意放了两个彩色圆斑，因为只有背后有东西时模糊才看得出来——卡片背后若是纯色，`backdrop-filter` 看起来会像什么也没做。

毛玻璃效果生成器

工具面板

相关工具

颜色选择器

颜色对比度

渐变色生成器

CSS 阴影生成器

单位换算

字节转换

CSS 圆角生成器

CSS 裁剪路径生成器