# 玻璃拟态生成器使用教程：可视化调节毛玻璃效果，一键复制 backdrop-filter CSS 代码

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/glassmorphism-generator-guide

## 工具简介

**玻璃拟态生成器**是工具派推出的一款可视化 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)` |
| 重置 | 一键恢复全部默认参数 | — |

## 使用步骤

1. **打开工具页面**：左侧是参数调节区，右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用，所有计算都在浏览器本地完成。

![玻璃拟态生成器主界面：左侧为参数调节区，含快速预设、背景类型切换、背景与卡片底色取色器、模糊半径/圆角/边框宽度/透明度](article/202607/1783967162212_9971.png)

2. **套用快速预设（推荐）**：先点「快速预设」里最接近目标风格的方案——做浅色清新风选 Frosted Glass 或 Light，深色界面选 Dark，蓝绿色调选 Ocean 或 Mint，暖色活动页选 Sunset。预设会一次性填好背景、卡片色、模糊、圆角等全部参数。

3. **设置预览背景**：在「背景类型」中切换「渐变色」或「纯色」，用取色器调整「背景起始 / 背景结束」或「背景色」。建议换成自己项目的真实背景色，才能准确判断玻璃卡片在实际场景中的通透感。

4. **微调玻璃参数**：拖动滑杆或在右侧数字框输入数值——「模糊半径」控制背景模糊程度，「透明度」控制卡片底色的深浅，「色彩饱和度」让背景色透过玻璃更鲜艳，「圆角」「边框宽度」「边框颜色」塑造卡片轮廓。每项修改都会立即反映到右侧预览。

5. **调整阴影（可选）**：在「阴影 (box-shadow)」文本框中编辑投影，例如 `0 8px 32px 0 rgba(31, 38, 135, 0.37)`；不想要阴影时填入 `none` 即可。

6. **复制代码使用**：确认效果后，在代码区右上方点「复制 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 验证效果。