任务路径 / 从输入到结果
如何组合 CSS 渐变
- 01
选择渐变类型
打开“渐变类型”，选“线性”得到直线过渡，选“径向”得到圆形过渡。预览角标会在你调整时显示当前角度。
- 02
设置方向或焦点
“方向 / 焦点”范围为 0 到 360。对线性渐变，它是角度值（度）；对径向渐变，它把焦点放在环绕中心的一圈上。
- 03
挑选颜色与色标
设置“起始颜色”和“结束颜色”，然后定位“起始色标”（0–99%）和“结束色标”（1–100%）。起始必须位于结束之前，否则状态会变为“检查取值”。
- 04
控制混合带宽
两个色标之间的距离就是过渡区：相隔 1% 的色标产生近乎硬边的双色条纹；而 0% 和 100% 的默认值给出最柔和的全宽混合。看预览，而不是看数字。
- 05
复制声明
点“复制 CSS”，或点“下载 .css”保存 toolars-gradient.css。.gradient 规则只有一条 background 声明——linear-gradient(…deg, …) 或 radial-gradient(circle at …, …)——与你的色标精确对应。
- 06
应用并扩展
这条单声明可以与你自己的 background-size 或 background-repeat 干净组合。需要第三种颜色？复制规则后手动插入一个中间色标——你调好的两个色标会锚定混合的两端。只有一行，也能整齐地粘贴进自定义属性，适合用 token 管理的设计系统。