CSS 如何实现文字渐变色？

Question

CSS 如何实现文字渐变色？

仓乃文 · Accepted Answer

文字渐变色需要将渐变背景裁剪到文字范围，核心是 background-clip: text 配合 text-fill-color: transparent。

基础实现：
```css
.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;         /* 背景裁剪到文字 */
  -webkit-text-fill-color: transparent;  /* 文字颜色透明，显示背景 */
}
```

金色文字变体：
```css
.gold-text {
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

补充说明：
- 必须同时设置 background-clip 和 text-fill-color 才能生效
- 非 WebKit 浏览器不支持此效果，需要 fallback
- 可以通过 @supports 检测：@supports (-webkit-background-clip: text)
- 渐变方向 to right 表示从左到右，也可使用角度如 135deg