工具简介
玻璃拟态生成器是工具派推出的一款可视化 CSS 辅助工具，专门用来制作流行的「毛玻璃」（Glassmorphism）效果：不用手写 backdrop-filter 数值，只要在页面上拖一拖滑杆、换一换颜色，右侧就能实时看到磨砂玻璃卡片的实际观感，并自动生成可以直接粘贴到项目里的 CSS 代码（自动附带 -webkit- 前缀，兼容 Safari）。工具提供 6 套设计好的预设，模糊半径、圆角、透明度、色彩饱和度、边框、阴影等参数全部可调，全程在浏览器本地运行，打开即用、无需安装。
功能亮点
- 6 个快速预设：Frosted Glass（默认）、Light、Dark、Ocean、Mint、Sunset，覆盖浅色、深色、海洋蓝、薄荷绿、落日橙等常见风格，一键套用后再微调即可。
- 背景类型可切换：预览背景支持「渐变色」（可分别设置起始色和结束色）和「纯色」两种模式，方便在不同背景下验证玻璃效果的通透感。
- 全参数可调：卡片底色、模糊半径、圆角、边框宽度、透明度、边框颜色、色彩饱和度、阴影（box-shadow）共 8 项参数，滑杆与数字框联动，也可直接编辑文本值。
- 实时预览：右侧预览区即时反映每次调节，玻璃卡片浮在渐变/纯色背景上，所见即所得。
- 两种复制方式：「复制 CSS」只复制
.glass样式；「复制 HTML+CSS」连<div class="glass">Glass</div>示例结构一起带走，粘贴即可运行。 - 兼容性提示：若当前浏览器不完全支持
backdrop-filter，页面顶部会提示已显示降级效果。
参数说明
| 参数 | 说明 | 默认值 / 取值范围 |
|---|---|---|
| 快速预设 | 一键套用整套配色与参数 | Frosted Glass（默认）、Light、Dark、Ocean、Mint、Sunset |
| 背景类型 | 预览区背景的填充方式，仅影响预览，不写入输出代码 | 渐变色（默认）/ 纯色 |
| 背景起始 / 背景结束 | 渐变模式下背景的两个端点颜色 | #ff9a9e → #fecfef |
| 背景色 | 纯色模式下的背景颜色，可用取色器或直接输入色值 | #ff9a9e |
| 卡片底色 | 玻璃卡片的填充色，取色器设置 RGB，透明度由「透明度」滑杆控制，也可直接编辑 rgba 文本 | rgba(255,255,255,0.25) |
| 模糊半径 | backdrop-filter 的 blur() 值，越大背景越糊 |
默认 12px，范围 0–50px |
| 圆角 | 卡片的 border-radius |
默认 20px，范围 0–100px |
| 边框宽度 | 卡片描边粗细 | 默认 1px，范围 0–10px |
| 透明度 | 卡片底色的不透明度，拖动时自动同步到 rgba 的 alpha 通道 | 默认 25%，范围 0–100% |
| 边框颜色 | 描边颜色，建议用半透明白色营造玻璃边缘的高光 | rgba(255,255,255,0.4) |
| 色彩饱和度 | backdrop-filter 的 saturate() 值，让透过玻璃的背景色更鲜艳或更灰 |
默认 180%，范围 0–300% |
| 阴影 (box-shadow) | 卡片投影，直接编辑 CSS 文本，填 none 可关闭 |
0 8px 32px 0 rgba(31, 38, 135, 0.37) |
| 重置 | 一键恢复全部默认参数 | — |
使用步骤
- 打开工具页面：左侧是参数调节区，右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用，所有计算都在浏览器本地完成。
套用快速预设（推荐）：先点「快速预设」里最接近目标风格的方案——做浅色清新风选 Frosted Glass 或 Light，深色界面选 Dark，蓝绿色调选 Ocean 或 Mint，暖色活动页选 Sunset。预设会一次性填好背景、卡片色、模糊、圆角等全部参数。
设置预览背景：在「背景类型」中切换「渐变色」或「纯色」，用取色器调整「背景起始 / 背景结束」或「背景色」。建议换成自己项目的真实背景色，才能准确判断玻璃卡片在实际场景中的通透感。
微调玻璃参数：拖动滑杆或在右侧数字框输入数值——「模糊半径」控制背景模糊程度，「透明度」控制卡片底色的深浅，「色彩饱和度」让背景色透过玻璃更鲜艳，「圆角」「边框宽度」「边框颜色」塑造卡片轮廓。每项修改都会立即反映到右侧预览。
调整阴影（可选）：在「阴影 (box-shadow)」文本框中编辑投影，例如
0 8px 32px 0 rgba(31, 38, 135, 0.37)；不想要阴影时填入none即可。复制代码使用：确认效果后，在代码区右上方点「复制 CSS」得到
.glass { ... }样式块，或点「复制 HTML+CSS」连示例<div>一起复制，粘贴到项目里即可生效。注意背景渐变/纯色只用于预览，不会写入输出代码，实际项目中请把背景样式写在自己的父容器上。
使用技巧
- 背景只影响预览：输出 CSS 只有
.glass卡片样式，不含背景。项目里通常把渐变背景写在父容器（如body或外层div）上，再让.glass卡片浮在上面。 - 透明度滑杆会自动同步 alpha：拖动「透明度」时，工具会自动把它写进卡片底色 rgba 的第四个分量，两者始终保持一致，不用手工改文本。
- 饱和度是玻璃质感的灵魂：
saturate()低于 100% 时透出的背景会发灰，150%–220% 区间能让背景色透过玻璃更浓郁鲜艳，Ocean、Sunset 预设就用了较高的饱和度。 - 浅色背景配白色卡片，深色背景换 Dark 预设：白底半透明卡片在浅色渐变上最通透；深色背景下请用 Dark 预设（黑色半透明卡片 + 低透明度白色边框），否则玻璃会糊成一团白。
- 模糊半径不是越大越好：10–20px 是常用区间，过大会让背景完全糊掉、失去层次感，过小则看不出磨砂效果。
- 边框用半透明白色模拟玻璃边缘高光：
rgba(255,255,255,0.3~0.5)的 1px 描边是玻璃拟态的标志性细节，能明显提升质感，别把它设成实色。
常见问题
Q1：调的背景渐变 / 纯色会出现在复制的代码里吗？
不会。背景相关设置只改变预览区的观感，帮助你验证玻璃卡片在不同背景下的效果，输出的 CSS 只包含 .glass 卡片本身的样式（background、border-radius、border、box-shadow、backdrop-filter）。
Q2：为什么用「卡片底色」取色器选颜色后，透明度没有变化？
取色器只能表达 RGB 三个通道， alpha（透明度）由「透明度」滑杆单独控制。拖动透明度滑杆时，工具会自动同步更新卡片底色 rgba 的第四个分量；也可以直接在文本框里编辑完整的 rgba 值。
Q3：输出代码里为什么有两行 backdrop-filter？-webkit-backdrop-filter 是 Safari 浏览器需要的私有前缀，工具会自动一并生成，保证 Chrome、Edge、Safari 等现代浏览器都能正确显示毛玻璃效果，两行都保留即可。
Q4：页面顶部提示「已显示降级效果」是什么意思？
说明当前浏览器不完全支持 backdrop-filter 特性，预览可能无法呈现真实的背景模糊。建议升级到最新版 Chrome、Edge 或 Safari 后再使用。
Q5：「复制 CSS」和「复制 HTML+CSS」有什么区别？
两者包含的样式完全相同。「复制 CSS」只复制 .glass { ... } 样式块，适合已有 HTML 结构的项目；「复制 HTML+CSS」额外附带 <div class="glass">Glass</div> 示例结构，适合快速搭建 demo 验证效果。