CSS 渐变（CSS Gradient） 是用 linear-gradient / radial-gradient / conic-gradient 这三个原生函数让背景在多种颜色之间平滑过渡的能力，CSS 现代规范的核心组成部分，不依赖图片就能实现复杂视觉效果。
| 类型 | 代表场景 | 关键参数 |
|---|---|---|
| linear 线性 | 卡片/按钮背景、页头开屏 | 角度（0°–360°） |
| radial 径向 | 球体高光、聚光灯、按钮内发光 | 形状（椭圆/圆）、中心位置 |
| conic 圆锥 | 饼图、彩虹盘、扫光指示器 | 起始角度、中心位置 |
色标（color stop）是渐变的最小单位，每个色标包含颜色和位置百分比。两个色标之间的距离决定过渡的”硬度”——距离近则边界锐利，距离远则过渡柔和。位置相同的两个不同色色标会产生硬边，常用于做条纹、双色拼接、丝带效果。
先选类型 → 选预设找到接近的色相起手 → 调角度（线性）或中心点（径向 / 圆锥）→ 微调每个色标的颜色和位置。直接从 0 配起容易陷入”差一点就好看”的微调死循环，从预设改起命中率高得多。
本工具直接生成符合 CSS Gradients Level 1/2 规范的标准语法，不附 -webkit- 等前缀。Chrome / Edge / Safari / Firefox 现代版本全部原生支持，包括 conic-gradient（Safari 12.1+ / 2019 起）。如需兼容 IE 11 或 2019 年之前的 Safari，请自行追加旧版前缀或使用 PostCSS Autoprefixer。
CSS 的 0° 是从下往上（向 12 点方向），顺时针递增——90° 是从左到右、180° 是从上往下、270° 是从右到左。这与数学坐标和早期 -webkit- 前缀语法都不一样，记不住时直接用工具的 8 个方位快捷按钮即可。
ellipse 是默认值，会跟随容器的宽高比自动拉伸成椭圆，让渐变沿对角线均匀过渡；circle 强制以正圆扩散，长方形容器里两侧会更早到达终点色。做球体高光、聚光灯效果用 circle，做柔和过渡背景用 ellipse。
把首尾两个色标设为同色——例如开头 #fc466b 0% 结尾也 #fc466b 100%，圆形扫一圈回到起点时颜色连续。如果首尾不一致，0°/360° 处会出现明显的硬边。本工具的 Pie 预设就是按这个原则配的。
位置差越小过渡越硬。两个不同色的色标位置相同（例如都在 50%）会形成一条硬边（常用于做条纹背景）；位置相差 5% 是较窄的渐变带；相差 50% 以上才是柔和过渡。需要分块配色（背景色块、丝带）就把两组色标各自挤在一起，需要柔和过渡就把色标拉开。
不需要。linear-gradient / radial-gradient / conic-gradient 在 Chrome/Edge/Safari/Firefox 现代版本里都已支持非前缀语法，conic-gradient 在 Safari 12.1+（2019）也已兼容。除非要兼容 IE 11 或 10 年前的安卓 WebView，否则不必加 -webkit- / -moz- 前缀，本工具直接输出标准语法。
会自动存到浏览器 localStorage——下次打开页面会还原上次的色标、类型、角度。换设备或清缓存会丢，长期保存请直接把生成的 CSS 复制到代码仓库。预设按钮始终在右下方，丢了随时可以从预设重新出发。
background: ...gradient(...); 一行，直接粘贴到样式表即可