CSS变量无法直接生成渐变色，因其仅存储字符串值而非可计算的渐变类型；但可通过变量控制渐变角度、颜色节点位置或HSL参数实现动态效果，JS则用于复杂非线性场景。
不能直接在 --color-1、--color-2 这类 CSS 变量里“生成”渐变色，CSS 变量本身只存值，不执行计算或插值。但你可以用变量控制渐变的起点、终点、角度或颜色节点位置，让渐变“看起来是动态生成的”。关键在于把可变参数抽出来，而不是试图让变量输出一个 linear-gradient() 字符串。
为什么不能把 linear-gradient() 写进 CSS 变量？
CSS 变量（custom properties）本质是字符串容器，即使你写成：
:root {
--bg: linear-gradient(to right, red, blue);
}这个 --bg 的值仍然是字符串 "linear-gradient(to right, red, blue)"，不是实际的 <gradient> 类型。当你用 background: var(--bg) 时，浏览器会尝试解析该字符串——**仅当它出现在支持 <gradient> 的属性上下文中才有效**（如 background），但无法用于计算、插值或条件判断。
更麻烦的是：一旦你试图在 JS 中读取 getComputedStyle(...).getPropertyValue('--bg')，拿到的就是原始字符串，没法再拆解或修改其中的颜色值。
立即学习“前端免费学习笔记（深入）”；
用变量控制渐变节点位置（最实用的规律梯度）
适合做条纹、等距色阶、呼吸式背景等有数学规律的场景。比如每 20% 插入一个新色点：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 定义一组基础色和步长：
--step: 20%、--c1: #ff6b6b、--c2: #4ecdc4、--c3: #ffe66d - 在
linear-gradient()中显式引用它们，并用calc()计算位置：
.stripe {
background: linear-gradient(
to right,
var(--c1) 0%,
var(--c1) calc(var(--step) * 1),
var(--c2) calc(var(--step) * 1),
var(--c2) calc(var(--step) * 2),
var(--c3) calc(var(--step) * 2),
var(--c3) calc(var(--step) * 3)
);
}这样改 --step 或增减 --cN，就能批量调整整个梯度节奏。注意：CSS 不支持循环，所以节点数必须手动写死，但结构清晰、易维护。
用 HSL 颜色模型 + 变量做连续色调渐变
如果你要的是“同一色相下明度/饱和度规律变化”，HSL 是唯一靠谱的选择：
- 固定色相
--h: 200，用变量控制饱和度和亮度： -
--s-start: 70%、--s-end: 30%、--l-start: 50%、--l-end: 80% - 然后写：
.hsl-gradient {
background: linear-gradient(
to right,
hsl(var(--h), var(--s-start), var(--l-start)),
hsl(var(--h), var(--s-end), var(--l-end))
);
}这种写法真正实现了“动态生成”——改变 --h 就换整套冷暖调，改 --s-start 就统一提纯/降纯，且所有浏览器都能正确解析为颜色值。比硬编码十六进制灵活得多。
JS 辅助生成并注入变量（适合复杂规律）
当梯度节点数多、位置非线性（比如按斐波那契间隔）、或需响应用户输入时，CSS 变量不够用，得靠 JS：
- 用 JS 计算出一串颜色值（例如通过 chroma.js 或自定义插值函数）
- 拼成 CSS 变量形式：
document.documentElement.style.setProperty('--c-0', '#ff6b6b')、--c-1、--c-2… - 在 CSS 中用这些变量构建渐变，例如：
linear-gradient(to right, var(--c-0), var(--c-1), var(--c-2))
注意：不要试图把整个 linear-gradient(...) 字符串塞进一个变量里再 var(--full-grad) —— 这种写法在 Safari 和旧版 Chrome 里极不稳定，且无法被 DevTools 正确高亮调试。
真正难的不是“怎么写”，而是想清楚哪部分需要动态——是颜色本身？位置？还是数量？选错抽象层，后面全是坑。
