Glassmorphism 毛玻璃效果生成器

📖 使用说明

Glassmorphism（玻璃拟态）是一种现代UI设计风格，通过半透明背景、高斯模糊和阴影模拟磨砂玻璃质感。调整上方参数可实时预览效果，满意后一键复制CSS代码。

核心CSS属性

毛玻璃效果主要由两个CSS属性实现：background: rgba() 设置半透明背景色，backdrop-filter: blur() 对背景内容进行模糊处理。搭配 border-radius 圆角和 box-shadow 阴影可增强玻璃质感。

🎯 适用场景

• UI卡片：信息卡片、资料卡片、仪表盘
• 导航栏：毛玻璃导航栏/顶栏效果
• 弹窗/模态框：让背景内容隐约透出
• 登录/注册页：背景图片上的毛玻璃表单

❓ 常见问题

backdrop-filter和filter有什么区别？

filter作用于元素自身内容，backdrop-filter作用于元素背后的内容。毛玻璃效果需要使用backdrop-filter来模糊背景内容。

浏览器兼容性如何？

backdrop-filter在Chrome 76+、Firefox 103+、Safari 9+、Edge 17+中支持。本工具已自动添加-webkit-backdrop-filter前缀以兼容更多浏览器。

为什么不显示毛玻璃效果？

请确认浏览器版本是否支持backdrop-filter。此外，透明度和模糊值过低会导致效果不明显。建议模糊值至少在10px以上。