毛玻璃 CSS 生成器
实时预览，打造毛玻璃卡片。
调整毛玻璃卡片的模糊度、着色透明度、圆角和边框，在彩色背景上实时查看效果，然后复制完整 CSS。
背景颜色
玻璃着色
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
如何制作毛玻璃效果
- 选择位于玻璃卡片后方的背景颜色。
- 选择着色颜色并设置其不透明度。
- 用滑块调整模糊度、边框透明度和圆角。
- 将生成的 CSS 复制到你的项目中。
常见问题
什么是毛玻璃效果？
这是一种模仿磨砂玻璃的界面风格：彩色背景上的半透明面板，再用背景模糊使其柔化。
CSS 里为什么有两个模糊属性？
带 webkit 前缀的属性让效果在 Safari 等需要它的浏览器中同样生效。
backdrop-filter 到处都能用吗？
所有现代浏览器都支持。非常旧的浏览器会显示没有模糊效果的普通半透明面板。