玻璃拟态生成器

玻璃拟态（Glassmorphism）是近年流行的 UI 设计风格，核心是通过 backdrop-filter 的 blur 与 saturate 让元素背后内容产生磨砂玻璃质感，再叠加半透明白色背景、细边框与内高光，营造通透、有层次的空间感，在 macOS、iOS 系统界面与众多 SaaS 产品中广泛使用。

典型应用场景

• 登录卡片、弹窗与浮层，让界面在彩色渐变背景上更通透
• 仪表盘与数据看板的模块卡片，增强前后景层次
• 移动端通知、控制中心等悬浮组件
• 营销页 Hero 区的装饰卡片与价格表

常见问题

• 为什么在 Safari 中没有玻璃效果？Safari 需要 -webkit-backdrop-filter 前缀，本工具生成的 CSS 已自动包含该前缀。
• 模糊度多少合适？一般 8-20px 之间效果最佳，过大可能导致内容难以辨认，过小则玻璃感不足。
• 背景透明度如何选择？0.15-0.35 之间比较自然；透明度过高会变成实色卡片，过低则文字可读性变差。
• 数据会上传吗？不会，所有参数调节与代码生成都在浏览器本地完成。