毛玻璃 CSS 效果生成
滑块控制模糊度、透明度、边框宽度和背景色，实时渲染 Glassmorphism 风格卡片
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 设置背景模糊半径 blur 值
- 调整面板透明度与底色
- 配置边框和圆角
- 在预览卡上确认效果
- 复制 CSS 粘贴到样式表
典型场景
落地页设计添加半透明浮层卡片
Dashboard 面板统一毛玻璃视觉语言
为弹窗或侧边栏增加层次感
常见问题
Safari 兼容吗？
代码包含 -webkit-backdrop-filter 前缀确保 Safari 生效。
可以叠加渐变背景吗？
支持在毛玻璃层下添加 linear-gradient 背景。
影响性能吗？
大面积 blur 可能降低渲染帧率，面板有提示。