CSS 文字渐变实战:用 background-clip 把渐变填进文字

很多人第一次想给标题做渐变色,搜出来的方案是给一个 div 加渐变背景,结果发现那是整块底色铺在文字后面,根本不是字本身在变色。真正的 CSS 文字渐变,是让渐变颜色顺着字形(glyph)的轮廓流进去,字的每一笔都带着颜色过渡。这篇把原理、写法、兼容和导出讲清楚,看完你能自己手写,也能直接拿生成好的代码用。

文字渐变和渐变背景不是一回事

先把概念分开。渐变背景是 background: linear-gradient(...) 铺在元素后面的一块色,文字仍然是你设的那个 color。文字渐变正好相反:渐变画在元素背景上,但这块背景被裁剪成文字的形状,只在笔画范围内显示,文字外的部分全部不可见。

差别在排版上很明显。背景渐变让整个矩形区域变色,文字渐变只让字母本身变色,周围留白还是页面原本的底色。Hero 大标题、Logo 文字、价格数字这类要"字本身发光"的场景,要的都是后者。

核心三行:背景裁剪到文字加文字透明

实现文字渐变,关键是三个声明配合,缺一行就翻车:

第一,把渐变画到元素背景上,这步和普通渐变背景一样。

第二,用 background-clip: text 把这块背景裁成文字形状,意思是"背景只在文字笔画覆盖的区域显示"。

第三,把字本身的填充色设为透明,color: transparent 或者 -webkit-text-fill-color: transparent。这一步最容易被漏掉:如果字还是不透明的纯色,纯色会盖在渐变上面,你只看到一块平涂的文字,渐变其实在,但被字挡住了。只有把字填充设为透明,底下裁好的渐变才透得出来。

这三步的逻辑顺一遍就是:画渐变,裁成字形,把字本身变透明让渐变露出来。

一段可以直接抄的例子

下面这段是一个从左到右扫过的双色标题渐变,顺序和兜底都写齐了:

.gradient-title {
  /* 兜底:不支持裁剪时仍显示可读的纯色文字 */
  color: #6d28d9;
  /* 画渐变背景 */
  background-image: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%);
  /* 把背景裁剪到文字形状,带前缀那行在前 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 把字本身填充设为透明,渐变才透出来 */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

注意第一行那个纯色 color: #6d28d9,它不是多余的。它放在透明覆盖之前,作为不支持裁剪的引擎的回退:那种浏览器会忽略后面的裁剪和透明,直接渲染这个纯色,文字至少可读,而不是一片透明空白。

浏览器兼容:为什么还要写 -webkit- 前缀

background-clip: text 当了很多年的 WebKit 实验特性,后来才进标准,但无前缀形式到现在也不是处处都稳。只写标准那行 background-clip: text,会在 Safari 和老 Chromium 上失效;只写带前缀的 -webkit-background-clip: text,又会在将来只认标准的引擎上失效。所以两行都得写,而且带前缀那行在前、标准那行在后。Tailwind 的 bg-clip-text、Bootstrap 的工具类底层也是这么干的。

还有一个最常见的事故,叫透明陷阱:文字整个消失了。原因是这个效果故意把字填充设成透明,一旦渐变背景没渲染出来,渐变值打错、漏了 background-clip、或者引擎不支持,页面上就只剩透明文字,什么都看不见。解法就是上面那段代码里的纯色兜底:在透明覆盖之前先声明一个真实纯色,底下永远有个可读颜色垫着。如果你的字隐形了,先检查带前缀和标准两行 background-clip 是不是都在,再检查渐变值是不是合法 CSS。

我自己踩过的一个坑

我第一次做价格页的金额高亮,渐变选了一个很浅的鎏金色,预览里在深色卡片上很漂亮,上线后白底区域里那个数字几乎看不见。问题就出在最浅的色标会成为可见文字的一部分,白底上放接近白色的色标,那段字母直接消失,别的都对也没用。后来我养成习惯:在真实字号下看一遍预览,并让纯色兜底本身就够深、能单独过对比度,把它当成对比度下限来卡。这也是为什么 CSS 文字渐变生成器的预览面板要放在棋盘格底色上,某个色标太浅读不清,你当场就看得出来。

导出代码与可访问性

手写这套声明,顺序和前缀都得记牢,一行写错就翻车。我现在的做法是用 CSS 文字渐变生成器把文字、渐变类型(线性、径向、圆锥)、色标和角度调好,它会按正确顺序输出生产级 CSS:纯色兜底在前,然后渐变,再是带前缀和标准两行裁剪,最后才是透明填充,一键复制就能用。如果你要的是整块背景渐变而不是文字渐变,换用渐变背景生成器更直接。

最后说可访问性和 SEO。文字渐变做对了不会有损失:字仍然是真实、可选中、可复制的 HTML,屏幕阅读器照读,Google 照索引,渐变纯粹是视觉样式。两点提醒,一是保证渐变最浅的部分在背景上仍清晰可读,拿纯色兜底当对比度下限;二是千万别为了做这个效果把标题切成图片,那会白白丢掉本来免费就有的 SEO 和可访问性。

Made by Toolora · Updated 2026-06-13