毛玻璃效果靠什么 CSS 实现？

核心是 backdrop-filter: blur() 对元素背后的内容做模糊，配合半透明 background（rgba）和浅色 border 形成磨砂玻璃质感。通常再加 saturate() 提升背后颜色的鲜艳度。

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

三种常见原因：① 元素背后没有可模糊的内容（背景是纯色也会“看不出”）——需要下面有图片/渐变；② background 不透明，挡住了模糊；③ 浏览器不支持或需要 -webkit- 前缀（Safari）。本工具已同时输出带 -webkit- 前缀的版本。

backdrop-filter 兼容性如何？

现代 Chrome/Edge/Firefox/Safari 均支持，Safari 需 -webkit-backdrop-filter 前缀（本工具已包含）。老旧浏览器不支持时会优雅降级为普通半透明背景，建议做好兜底样式。

性能上要注意什么？

backdrop-filter 模糊是较重的合成操作，大面积或多层叠加、频繁滚动时可能掉帧，移动端尤甚。控制模糊区域大小、避免在滚动容器里大量使用。

毛玻璃效果 CSS 生成器

可视化调模糊、透明度、饱和度、圆角、边框，实时预览 Glassmorphism 磨砂玻璃效果，一键复制带 -webkit- 前缀的 backdrop-filter 代码。纯前端。

毛玻璃 Glass

模糊12px透明度18%饱和度160%圆角16px边框30%

底色

CSS 代码

background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;

怎么用？

拖动滑块调模糊 / 透明度 / 饱和度 / 圆角 / 边框，卡片在彩色背景上实时预览。
选底色（多数毛玻璃用白色低透明度）。
点「复制 CSS」拿走全部代码（已含 Safari 的 -webkit- 前缀）。

关键：元素背后要有内容

毛玻璃是模糊「元素背后」的东西。如果卡片下面是纯色背景，模糊了也看不出效果—— 需要下面有图片或渐变。同时 background 必须是半透明（rgba），否则会把模糊挡住。

关于 chdh.me 在线工具

本工具是 出海导航 chdh.me 免费在线工具集的一员，同类还有 CSS 渐变生成器、 CSS box-shadow 生成器、 CSS border-radius 生成器，均纯前端运行、不上传、不追踪。