这是一个在浏览器里直接调渐变参数、实时看效果、复制 CSS 代码的小工具。线性渐变（linear-gradient）和径向渐变（radial-gradient）都能调：角度、色标位置、颜色透明度、径向的形状和尺寸关键字。做落地页背景、按钮悬停态、卡片描边、图表色带时，手写 linear-gradient(135deg, #667eea 0%, #764ba2 100%) 这种代码要反复改数字试效果，改一次刷新一次，很费时间。比如你要给一个登录页做从左上到右下的紫蓝渐变，要求 0% 是 #667eea、100% 是 #764ba2、角度 135deg，在这里拖两个色标就能看到结果，不用来回改代码刷新。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 调一次角度 | 拖动圆盘即时预览，约 1-2 秒 | 改代码→保存→刷新页面，约 10-20 秒 |
| 色标位置精度 | 拖动 + 数值输入，可精确到 1% | 手写百分比，靠目测估计，误差常达 5%-10% |
| 径向参数试错 | 形状/尺寸关键字下拉切换，实时看效果 | 需记住 4 个尺寸关键字含义，反复查文档 |
| 代码产出 | 直接复制完整 background 声明 | 手写易漏分号、单位或 0% 起始色标 |
| 隐私 | 全部在浏览器本地计算，不上传 | 在线工具可能把配色上传到服务器 |
按 CSS 规范，0deg 指向正上方，角度顺时针增加：90deg 指向右，180deg 指向下，270deg 指向左。所以「从左到右」要写 90deg，而不是 0deg。135deg 是左上到右下，315deg 是右下到左上。写反了渐变方向就整个颠倒。
可以。CSS 允许色标位置小于 0% 或大于 100%，浏览器会按外推计算颜色。比如 linear-gradient(red -20%, blue 120%) 会让纯红和纯蓝的区间被压缩到中间。但多数场景建议保持在 0%-100% 内，超出后不同浏览器插值结果可能有细微差异。
常用四个：closest-side 让渐变刚好碰到最近边，farthest-side 碰到最远边，closest-corner 碰到最近角，farthest-corner 碰到最远角（也是默认值）。做卡片光晕通常用 farthest-corner，做贴边高光用 closest-side。尺寸也可直接写半径，如 circle 200px。
可以，但要配合两行代码：background: linear-gradient(...); background-clip: text; -webkit-background-clip: text; color: transparent;。注意 background-clip: text 在部分旧版浏览器需要 -webkit- 前缀，且文字选中高亮可能显示异常，建议同时设 -webkit-text-fill-color: transparent。
常见原因是色彩空间。CSS 渐变默认在 sRGB 空间做线性插值，而设计软件（如 Figma）可能用感知均匀的 OKLab 插值，中间过渡色会不同。另外显示器色域、系统夜间模式滤镜也会影响观感。要精确一致，可在渐变里加 in oklab 关键字，如 linear-gradient(in oklab, ...)。
能。background 支持逗号分隔多个渐变，先写的在上层。例如 background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), linear-gradient(135deg, #667eea, #764ba2); 就是给渐变加一层半透明黑色遮罩。层数没有硬性上限，但超过 5 层后渲染开销会明显上升。
适用范围：生成标准 CSS background 渐变声明，兼容 Chrome、Firefox、Safari、Edge 近五年版本。颜色插值默认走 sRGB，需要感知均匀过渡可手动加 in oklab。本工具不处理 IE 的旧 filter 渐变语法。所有计算和预览都在浏览器本地完成，输入的色值、角度不会上传到任何服务器，关掉页面即清空。