Glassmorphism生成器

使用方法

Glassmorphism生成器只做一件事：把五个参数变成一段能直接用的 CSS，四步：

1. 拖「模糊半径」定毛玻璃的通透程度，演示值 16px。
2. 拖「底色不透明度」定卡片有多实，演示值 20%。
3. 拖「圆角」与「边线不透明度」，演示值 16px 与 30%。
4. 点「生成 CSS」出片段，上方预览同步更新；点「复制 CSS」整段拿走。

下方对照表给出 18 组常用参数，前 12 行展开，余下 6 行点「加载更多」。

Glassmorphism生成器能解决什么

它解决「知道毛玻璃好看但调不出参数」这件事，适合三类人：

• 写前端的：直接拿走一段可用的 CSS，不用来回试 backdrop-filter 的数值。
• 做设计的：用滑杆快速比出深度层级，把模糊大、底色实与模糊小、底色透的效果并排看。
• 做模板的：卡片、导航条、弹窗各需要一套参数，对照表里直接抄。

它不做三件事：不生成整套页面、不导出图片（只出 CSS 文本）、不做兼容性检测——旧浏览器不支持 backdrop-filter 时会退化成半透明纯色，需要你自己加降级。

原理和变量

① 毛玻璃靠哪几行实现：核心是 backdrop-filter: blur(n)，它把背后的内容模糊掉；再配一层半透明底色，卡片才有「玻璃」的存在感。少了底色，模糊区域边界会糊成一片。

② α 值怎么换成整数：CSS 的 rgba 第四位可以直接写小数，也可以写 0 到 255 的整数。0.20 换成整数是 255 × 0.20 = 51，两者等价，本页统一输出小数形式，更好读。

③ 为什么要一起输出 -webkit- 前缀：部分 Safari 版本只认带前缀的写法。两行一起给，省得你手工补，代价是 CSS 多 40 来个字符。

④ 输入怎么变成输出：模糊 16、底色 20%、圆角 16、边线 30% 时，生成的就是那五行声明，共 168 个字符；把圆角改成 999px 会得到胶囊形，浏览器实际会裁到卡片高度的一半。

⑤ 边界与校验：四个滑杆的取值都被限死（模糊 0 到 40px、底色 5% 到 60%、圆角 0 到 40px、边线 0 到 80%），不存在非法输入；复制按钮在还没生成时点，会提示先点「生成 CSS」。

⑥ 常见误用：一是只写 backdrop-filter 忘了 -webkit- 前缀，Safari 上直接没效果；二是把模糊值开到 40px 以上，卡片边缘会糊成一块，文字也跟着发虚；三是底色不透明度超过 60%，玻璃就变成了实心块，失去通透感。

完整示例

演示参数：模糊 16px、底色不透明度 20%、圆角 16px、边线不透明度 30%。生成的 CSS 片段为：

• background: rgba(255, 255, 255, 0.2);
• backdrop-filter: blur(16px);
• -webkit-backdrop-filter: blur(16px);
• border: 1px solid rgba(255, 255, 255, 0.3);
• border-radius: 16px;

整段共 168 个字符。把圆角从 16 改成 999，其余不动，得到的仍是五行，只是最后一行变成 border-radius: 999px;，预览里的方角立刻变圆角胶囊。把边框不透明度从 30% 拉到 0，边线消失，卡片只剩一层模糊底，边界感立刻变弱——这就是边线存在的意义。

输入范围与对照表

下表列出 18 组常用参数，前 12 行直接展开，余下 6 行点「加载更多」：

输入范围：模糊半径 0 到 40px（步长 1）；底色不透明度 5% 到 60%（步长 1）；圆角 0 到 40px（步长 2）；边线不透明度 0 到 80%（步长 1）。四组参数合共 41 × 56 × 21 × 81 种组合，本页只列最常用的 18 组，其余靠滑杆自己调。

结果边界和舍入

三条边界：

• 只输出 CSS 声明，不带选择器：片段里没有 .class 与花括号，你可以直接贴进已有的类里，也可以自己套一层选择器。
• 不判断背景是否合适：毛玻璃只有压在有内容的背景上才看得见。如果背后是纯色，模糊等于没做，需要先换背景。
• 不处理性能：backdrop-filter 会触发一次额外的合成，页面里同时存在十几个毛玻璃元素时，滚动可能变卡，建议只用在卡片与导航层。

常见问题

相关工具

• Bbq餐厅名字生成器
• Sneaker品牌名字生成器
• 虚拟顺序ID生成器
• 二维码生成器
• 乐队名生成器
• CloudKitchen名字生成器
• 虚拟国家生成器