轻松创建现代玻璃态UI效果
通过简单的参数调整,实时生成精美的CSS毛玻璃效果代码,直接应用到你的项目中
毛玻璃效果(Glassmorphism)是一种半透明模糊效果,常用于现代UI设计
参数设置
0px
50px
0
1
0
1
0px
50px
实时预览
毛玻璃效果示例
这是一个应用了毛玻璃效果的元素
生成的代码
.glass { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; }
提示:毛玻璃效果通常需要在有背景图片或渐变的元素上才能更好地展示效果。
使用说明
调整参数
通过左侧控制面板调整模糊半径、透明度等参数,实时查看效果变化
复制代码
参数调整满意后,点击"复制代码"按钮获取CSS代码
应用到项目
将复制的CSS代码粘贴到你的项目样式中,为元素添加glass类名
分享评分
如果你喜欢这个工具,请给我们评分并分享给更多开发者