毛玻璃 CSS 生成器

通过 backdrop-filter 生成 Glassmorphism 毛玻璃效果，可调透明度、模糊半径、边框，自动添加 -webkit- 前缀

参数控制与预览

调节背景透明度、模糊半径与边框，右侧实时预览毛玻璃卡片效果

0.5

范围 0–1，值越小越透明

10 px

backdrop-filter 的模糊强度

1 px

0–3 px，建议 1 px 配合半透明白色边框

透明度 50%
240 px
160 px
实时预览
Glass Card
毛玻璃效果依赖彩色背景，预览区已使用彩色 SVG 渐变作为背景
CSS 代码
包含 backdrop-filter、background 与 border，自动添加 -webkit- 前缀 
/* 调节参数生成 CSS */
广告位

使用说明

  1. 调节"背景透明度"滑块（0–1），数值越小毛玻璃卡片越透明
  2. 调节"模糊半径"滑块（0–30 px），数值越大背景模糊越强
  3. 调节"边框宽度"滑块（0–3 px），通常 1 px 半透明白色边框最自然
  4. 选择边框颜色，工具会自动以 50% 透明度应用
  5. 可调整预览卡片的宽度与高度
  6. 右侧预览区使用彩色 SVG 渐变作为背景以突显毛玻璃效果
  7. 点击"复制 CSS"将含 -webkit- 前缀的代码复制到剪贴板

适用场景

  • 登录卡片：在彩色背景图片上叠加半透明模糊登录卡片
  • 导航栏：制作悬浮在内容上方、不阻挡视线的导航条
  • 弹窗 / Modal：让弹窗背景模糊以突出当前内容
  • 工具栏 / 浮层：在图片编辑器、播放器中制作毛玻璃工具栏
  • iOS / macOS 风格 UI：模仿系统级毛玻璃效果，营造现代质感

安全保障

  • 本地生成：所有 CSS 计算与代码生成均在浏览器本地完成
  • 隐私保护：不收集、不存储任何用户操作数据
  • 无网络请求：整个生成过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

毛玻璃和普通透明背景有什么区别？

普通透明背景（background: rgba(...)）只是让卡片半透明，背景内容清晰可见但缺乏模糊；毛玻璃通过 backdrop-filter 对卡片背后的内容进行高斯模糊处理，产生磨砂玻璃质感，让卡片更突出且文字更易读。

为什么要加 -webkit- 前缀？

部分基于 WebKit 内核的浏览器（旧版 Chrome、Safari、iOS Safari）对 backdrop-filter 的支持需要 -webkit- 前缀。本工具同时输出 backdrop-filter 与 -webkit-backdrop-filter 两行，确保最大兼容性。

为什么我的页面看不到效果？

可能原因：1) 卡片下方没有彩色背景内容可被模糊；2) 父元素设置了 overflow:hidden 且 z-index 错误；3) 使用了 Firefox 早期版本（103+ 才默认支持）；4) 在 iframe 中跨域背景无法被模糊。建议在卡片后放一张图片或彩色渐变以观察效果。

backdrop-filter 会影响性能吗？

backdrop-filter 在大尺寸元素或页面同时存在多个毛玻璃区域时会影响渲染性能（尤其在低端移动设备上）。建议仅在登录卡片、弹窗等小范围区域使用，模糊半径不超过 20 px；对动画场景可配合 will-change 优化。