毛玻璃效果生成器

关于毛玻璃效果生成器

毛玻璃（Glassmorphism）是一种流行的 UI 设计趋势，通过 backdrop-filter: blur() 配合半透明背景和细微边框来模拟磨砂玻璃效果。本工具让您通过实时控件精确调节外观，并即时复制可直接使用的 CSS 代码。

可控制的属性

• 背景模糊度 — 毛玻璃效果的强度（0–40px）。
• 背景透明度 — 玻璃表面的透明程度。
• 边框 — 高光边缘的宽度和透明度。
• 阴影 — 自定义 box-shadow 增加层次感。
• 形状与内边距 — 圆角和内部留白。
• 预览背景 — 切换不同背景查看玻璃效果表现。

使用方法

1. 拖动 背景模糊度 滑块设置毛玻璃强度。
2. 调整 背景透明度 达到所需透明效果。
3. 选择背景颜色和边框设置。
4. 输入 box-shadow 值增加立体感。
5. 点击 复制 CSS 并粘贴到样式表中。

常见问题

backdrop-filter 在所有浏览器都支持吗？ 所有现代浏览器均支持。Safari 会自动包含 -webkit-backdrop-filter 前缀。非常旧的浏览器只会显示半透明背景而不会模糊。

为什么在纯色背景上看不到毛玻璃效果？ 毛玻璃效果依赖彩色或纹理背景才能显现。请将毛玻璃元素置于图片、渐变或彩色区域之上。

可以用于全屏遮罩吗？ 可以 — 增大模糊度和透明度可用于模态框背景，调小可用于导航栏。