CSS中color属性不支持渐变，因规范限定其仅接受单色值；唯一可靠方案是background-clip:text配合color:transparent和-webkit-background-clip:text实现文字渐变效果。
直接用 color 属性设渐变色不可能生效——CSS 规范里 color 只接受单色值，linear-gradient() 写进去会被浏览器静默忽略，控制台不报错，但文字永远是纯色。
为什么 background-clip: text 是唯一靠谱的路径
真正起作用的是把渐变当背景，再用文字轮廓当“镂空模板”。这需要两个动作同时成立：background-clip: text 把渐变限制在字形内，color: transparent 让字身变透明、透出底下的渐变。漏掉任意一个，文字就退化成黑字或消失。
-
-webkit-background-clip: text必须写，Safari（包括 iOS）和旧版 Chrome/Edge 仍只认这个前缀 - 只写
background: linear-gradient()+background-clip: text，文字还是纯色——因为没挖空字身 - 只写
color: transparent不配background-clip，文字直接变透明，啥都看不到 - 别用
text-fill-color单独设（非标准属性），只用color: transparent和-webkit-text-fill-color: transparent作双保险
HTML 编辑器里粘贴即用的最小代码块
这段代码可直接粘贴进任何支持 HTML 的编辑器（如 WordPress 古腾堡、Notion 嵌入 HTML 块、Typora、Obsidian 插件等），适用于 <p>、<h2>、<span> 等标签：
<p style="background: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline-block;">这是一段彩虹渐变文字</p>
- 角度写死为
90deg比to right更可靠，避免某些编辑器解析失败 -
display: inline-block是必须项——多数编辑器默认生成<p>是 block，但部分富文本框会删掉它，显式声明防丢 - 七种颜色按光谱顺序排列；若段落短，可删减中间色（如只留
#ff0000, #008000, #0000ff） - 没加
font-size或line-height——这些需按你页面原有样式补全，否则可能被继承压缩
Firefox 和老 Android WebView 怎么办
截至 2026 年 9 月，Firefox 仍未支持 background-clip: text（包括带前缀版本）。这不是你写错了，是它根本没实现。你看到文字是纯色，不是 bug，是标准落地滞后。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
@supports (background-clip: text)包一层，里面写渐变；外面写回退的color: #333 - 真要兼容 IE 或旧 Android WebView，SVG 是最稳的选择：
<text>天然支持<linearGradient>引用，无需裁剪逻辑 - 别试
mask-image——Firefox 对-webkit-mask-image支持也不一致，且移动端 Safari 的 mask 渲染常偏移 - 如果编辑器不支持嵌入完整
<svg>，至少保留 fallback 文字色，别让内容不可读
最容易被忽略的点：iOS Safari 对超过 3 个色标的 linear-gradient() 在滚动中容易闪白，尤其是吸顶栏或轮播文案；动画场景优先用 filter: hue-rotate() 替代 background-position 动画。
