CSS 渐变生成器

功能

• 线性、径向、锥形三种渐变
• 角度 0–360 可调，线性与锥形都跟着它走
• 起止两色用取色器选，不用手打色值
• 可选的中间色标，位置 0–100% 可调
• 每一项改动都实时重画预览，不需要点「生成」
• 下方直接给出可复制的 CSS 规则，带 `.gradient` 选择器
• 代码带语法着色，复制按钮一步拿走
• 预览区用棋盘格底纹，半透明与边界一眼可见
• 色值与角度都做过校验：拼出来的 CSS 一定是合法的
• 所有计算在浏览器本地完成，不上传任何东西

使用方法

1. 先选类型：线性、径向还是锥形
2. 拖角度、点开取色器选起止两色，预览会立刻跟着变
3. 需要三色过渡就勾上「加中间色标」，再调它中间色与位置
4. 觉得对了，点右下角的复制按钮把 CSS 拿走

常见问题

这三种渐变什么时候用哪种？

线性最通用：按钮底色、卡片高光、页面背景的分层，都靠它，角度控制方向（90deg 从左到右、0deg 从下到上）。径向适合「有个中心」的效果：聚光灯、球体高光、从中心淡出的发光感。锥形绕中心一圈分配颜色，做进度环、色相环、饼图最省事 —— 它常被忽略，但只要你要的是「按角度分颜色」，它就是唯一的那个。

角度是怎么算的？为什么 0 度不是从左到右？

CSS 的 `0deg` 指向上方（从下往上），角度按顺时针增大：`90deg` 是从左到右，`180deg` 是从上往下，`270deg` 是从右到左。这个起法与 CSS 的坐标系有关（y 轴向下，但渐变角度按数学惯例定义）。另外可以用关键字写法（`to right`、`to bottom right`），它与固定角度的差别在于响应式：关键字会随元素的宽高比自动调整角度好让渐变穿过对角线，而固定角度不会。

中间色标关掉之后，那一段 CSS 会怎样？

整段都不进 CSS，而不是留一个「位置在 50% 处、与两端同色」的空色标。那种空色标在代码里看着像有作用，实际什么都不影响 —— 而且会让人以后不敢删。所以这里的做法是：不勾选，代码里就只有两个色标。你在预览里看到的与复制走的一定是同一段代码，这一点由外壳的契约护栏钉着（每一条应用到预览上的声明都必须出现在交付的 CSS 里）。

渐变的颜色能拿去做别的用吗？

能 —— 结果里的起止色值都是普通十六进制，复制走之后可以拿去算配色。想以其中一个颜色为主色推出整套搭配（单色、互补、三角……），可以用本站的「配色方案」工具；想在 180 段现成的渐变里找灵感，可以用「渐变配色」。这两个都与本工具互补：这里是从零调一段，那两个是现成的库。