CSS 渐变生成：2–6 个色标、线性与径向、角度怎么调

CSS 渐变的一条声明就能表达整张渐变图，不需要图片资源。生成器的价值不是「帮你写出那行代码」，而是「让你在调色标位置时立刻看到结果」——位置差 5% 观感差很多。

线性渐变的角度

linear-gradient(角度, 色标...) 里，角度 0deg 指向上方，90deg 指向右方，顺时针增加。所以：

• to bottom = 180deg（从上到下）
• to right = 90deg
• to bottom right ≈ 135deg

用关键字更直观，用角度更精确。做斜向渐变时角度要跟着容器宽高比调，否则在窄屏上会看起来偏斜。

色标位置的作用

不写位置时，色标均匀分布；写了位置（#fff 20%）就固定在该处。两个色标位置相同会产生硬边，这是做条纹、分段背景的常用技巧。

色标少于 2 个时渐变无效（CSS 规范要求至少两个颜色）。最多支持 6 个，更多色标在视觉上收益递减，还容易脏。

线性与径向怎么选

线性：方向明确，适合按钮、卡片背景、页面分区。它有一个「方向感」，会用视觉引导注意力。

径向：从中心向外扩散，适合光晕、聚焦、球形高光。默认中心在元素中心，可以用 at 位置 移动。

界面里大面积背景建议用线性（径向在宽屏上会出现明显的椭圆光斑）；强调元素、图标底色可以用径向。

复制出来的代码能直接用吗

复制按钮给出的是一行完整的 background 声明值，不含多余包装，粘进样式表即可。包含兼容性前缀的写法不在输出范围内——现代浏览器都支持无前缀版本。

所有颜色换算与渐变渲染在浏览器本地完成，页面不发出任何携带数据的网络请求。