渐变文字

什么时候用

• 首屏大标题想有一点彩色，又不想引入图片或 SVG
• 强调品牌名、数字、少量关键词，不覆盖整段正文
• 深色页面上做霓虹或金属质感的标题

适用场景：文字 / 页面 / 卡片

推荐取值

渐变角度

90–135deg

色标数量

2–3 个

对比度

正文至少 4.5:1

降级

@supports 不支持时退回实色

别搞混

• 和「逐字上色」的区别

  用 span 给每个字单独设色，颜色是一段一段拼出来的；background-clip: text 是一整条渐变连续铺满整个文字盒子，每个字落在渐变的哪一段由盒子的宽度和字的位置决定。

• 和「text-shadow 外发光」的区别

  text-shadow 只在字形外面加一层光，字身仍然是单色；渐变文字是把背景裁进字形里面，颜色出现在字的内部。

容易踩的坑

• 一定要同时写 background-clip: text（配 -webkit- 前缀）和 color: transparent，否则会看到文字后面压着一整块背景色。
• color: transparent 在 Windows 高对比度（forced-colors）模式下会让文字整体消失，要加 @media (forced-colors: active) 退回实色。
• 渐变两端都要和背景有足够对比：浅色那一端压在浅背景上会直接糊掉，正文级别至少保证 4.5:1。
• 背景是铺在元素盒子上的，文字换行以后渐变会跨整个盒子，不是每一行重来一遍。
• 整段正文都上渐变会明显掉可读性，一般只给一到两行标题用。

无障碍降级

渐变本身是静态的；如果加了背景流动或者色相旋转这类动效，prefers-reduced-motion 下要停掉动画，只保留静态渐变。

关键词

• background-clip: text
• -webkit-background-clip
• color: transparent
• -webkit-text-fill-color
• linear-gradient
• forced-colors
• background-size

参考

• MDN · background-clip
• MDN · linear-gradient()

相关展品

• V-03渐变网格Mesh Gradient
• V-06渐变描边Gradient Border
• T-05可变字体Variable Font