毛玻璃CSS在线生成工具 - Glassmorphism玻璃态效果
可视化调节模糊、透明度与边框，生成玻璃态 CSS 代码。
毛玻璃卡片预览
什么是毛玻璃效果？
毛玻璃效果（Glassmorphism）是近年流行的 UI 风格，通过半透明背景、背景模糊 backdrop-filter、细边框和圆角组合，让元素呈现磨砂玻璃质感，常用于导航栏、卡片和弹窗。
Yeo工具箱的毛玻璃效果生成器提供模糊半径、透明度、圆角与边框的滑块调节，实时预览玻璃卡片效果并生成带 -webkit- 前缀的兼容 CSS 代码。
如何使用Yeo工具箱的毛玻璃效果？
- 调节背景模糊半径与卡片透明度
- 设置圆角、边框宽度和边框颜色
- 预览区实时显示毛玻璃卡片效果
- 一键复制生成的 Glassmorphism CSS 代码
常见使用场景
- 场景1：页面顶栏与侧边栏的玻璃质感
- 场景2：弹窗与卡片悬浮层背景
- 场景3：音乐、视频应用的控制面板
- 场景4：深色背景上的玻璃态信息卡片
使用小贴士
- 毛玻璃背后需要彩色背景或图片才有明显效果
- 透明度建议 20%-60%，太高会看不清内容，太低失去玻璃感
常见问题
Q1: 毛玻璃效果是怎么实现的？
核心是 backdrop-filter: blur()，让元素背后区域产生模糊；配合半透明背景色、细边框和圆角，就能模拟磨砂玻璃质感。
Q2: backdrop-filter 兼容性如何？
现代 Chrome、Edge、Firefox、Safari 均支持，Safari 需要 -webkit-backdrop-filter 前缀。低版本浏览器会退化为普通半透明卡片。
Q3: 为什么毛玻璃没生效？
backdrop-filter 只能模糊元素背后的内容，如果背后是纯白空背景就看不出效果。请给页面添加彩色背景或图片再验证。
更新日志
- 2026-08-04 更新：Yeo工具箱 毛玻璃效果工具正式上线
⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。