CSS 渐变生成器 —— 线性 / 径向多色标在线生成

CSS 渐变本质是「在两个或多个颜色之间做插值」，写法上它是一个图像（image），所以放在 background 或 background-image 上，而不是 background-color。最常用的是 linear-gradient(角度, 颜色1 位置1, 颜色2 位置2…)：角度 0deg 是从下往上、90deg 是从左往右、180deg 是从上往下，到 135deg 这种斜向最常见于卡片和按钮背景。径向渐变 radial-gradient 则从一个圆心向外扩散，适合做聚光灯、光晕、球面高光这类效果，circle 是正圆、ellipse 会随容器比例拉伸。设计猫把这些参数都做成可视控件，你不用记语法，拖一拖就出来。

让渐变「高级」的关键不在颜色多，而在颜色之间的过渡是否自然。两个色相差太远（比如纯红直接到纯绿）中间会出现发灰的「脏色带」；解决办法是让相邻色标的色相、明度尽量接近，或在中间加一个过渡色标。色标的位置（color stop）决定了每段过渡的占比——把两个色标拉近，过渡就变陡、接近一条硬边界；拉远则过渡更柔和。想做「双色对半分」的色块，就把两个色标放在同一个百分比上制造硬切。这些都能在设计猫里实时拖出来看效果，省去反复改代码刷新的来回。

拿到渐变后，落地有几个实用技巧：一是把渐变存成 CSS 变量（如 --hero-grad），多处复用、改主题只改一处；二是渐变可以叠加，用逗号分隔多个 background 图层能做出网格、光斑等复合纹理；三是注意可访问性——渐变背景上的文字要保证对比度，深色渐变配浅字、浅色渐变配深字，必要时加一层半透明遮罩压一下。设计猫输出的是标准 background 值，复制即用，全程在你浏览器本地完成，不上传、不注册、无次数限制。