参数
模糊 12px, 直透 15%
CSS
backdrop-filter: blur(12px);
design / 可用工具
毛玻璃 CSS 生成器
可视化调节模态背景的模糊度、透明度、边框等参数，一键生成毛玻璃（Glassmorphism）CSS 代码。
CSS毛玻璃设计
在线工具
毛玻璃效果生成器
Glassmorphism
毛玻璃效果预览
12px
0.15
0.20
使用场景
- 设计卡片组件
- 模态框效果
- 导航栏模糊
如何使用
- 1. 调整模糊度和透明度
- 2. 调整边框亮度和背景色
- 3. 复制生成的代码
示例输入输出
FAQ
兼容性如何？
需要浏览器支持 backdrop-filter，已生成了 webkit 前缀代码。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。