渐变文字需同时满足三个条件：-webkit-background-clip: text、background-clip: text 和 color: transparent；否则仅显示纯色文字。
background-image 渐变文字为什么默认不显示颜色
文字用 background-image 做渐变，本质是把渐变当背景“贴”在文字上，但文字本身没透出背景——得靠 -webkit-background-clip: text 和 color: transparent 配合才能“挖空”文字，让背景透出来。漏掉任一条件，看到的只是普通纯色字。
-
-webkit-background-clip: text是关键，它把背景裁剪成文字形状（注意：仅 WebKit 内核原生支持，Firefox 需加background-clip: text+color: transparent，且要确保background-image存在） -
color: transparent必须显式设置，不能依赖继承或初始值；否则文字会盖住背景 - 渐变方向建议用
to right或90deg，方便后续用background-position水平移动
animation 里 background-position 怎么动才看起来连续
想让渐变“流过”文字，本质是让背景图位置持续偏移。但直接写 background-position: 0% → 100% 会跳变——因为渐变色块宽度固定，100% 位移后起点和终点对不齐，断层明显。
- 必须用
background-size扩大渐变范围，常见做法是设为文字宽度的 200%～300%，比如background-size: 200% 200% - 动画终点设为
background-position: -100% 0（不是100% 0），这样从0 0移到-100% 0，视觉上才是向左匀速流动 - 时间函数推荐
linear，避免ease导致速度不均、节奏感破掉
兼容性与性能要注意哪些硬伤
这个效果在 Safari 和 Chrome 上很稳，但在 Firefox 和旧 Edge 上容易失效，不是 CSS 写错，而是渲染机制差异。
- Firefox 从 v62+ 支持
background-clip: text，但必须同时声明-webkit-background-clip: text（即使不生效）才能触发；且color: transparent缺一不可 - IE 完全不支持，
background-clip: text会被忽略，文字变黑或透明（取决于默认 color），别试图 hack - 动画中频繁读写
background-position会触发重排，建议加will-change: background-position提前告知浏览器优化 - 如果文字内容动态变化（如 Vue/React 绑定），需确保父容器不意外重绘，否则动画可能重置
一个能直接抄的最小可用代码块
下面这段可直接粘贴进项目，已验证在 Chrome 115+、Safari 16.4、Firefox 120+ 正常运行：
立即学习“前端免费学习笔记（深入）”；
h1 {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5f5, #7a57d1);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientMove 6s ease infinite;
will-change: background-position;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: -100% 50%;
}
}
注意：background-position 的 Y 轴（这里是 50%）保持不动，只动 X 轴；动画时长 6s 可按需调整，太快易晕，太慢显滞。
真正难的不是写对这几行，而是当它在某个安卓 WebView 里突然变灰时，你得立刻意识到：不是渐变错了，是那个壳子压根没开 background-clip 支持。
