创建精美的玻璃态UI效果
调整下方参数，实时预览毛玻璃效果，并一键复制CSS代码到您的项目中
参数设置
0
0.2
1
0px
10px
50px
0px
12px
30px
0
0.1
1
效果预览
毛玻璃效果
这是一个玻璃态UI示例
CSS代码
.glass-effect {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
已复制!
使用说明
如何使用
- 调整左侧参数控制毛玻璃效果
- 在中间区域实时预览效果变化
- 点击"复制"按钮获取CSS代码
- 将代码粘贴到您的项目中使用
浏览器兼容性
- Chrome 76+ 完全支持
- Firefox 70+ 部分支持
- Safari 14+ 完全支持
- Edge 79+ 完全支持
- 建议添加webkit前缀以获得更好兼容性