CSS 如何实现文字渐变效果？

Question

CSS 如何实现文字渐变效果？

仓乃文 · Accepted Answer

文字渐变通过 background: linear-gradient() 配合 background-clip: text 和透明文字颜色实现，让文字呈现渐变色。

```css
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

动画渐变文字：
```css
.animated-gradient-text {
  background: linear-gradient(
    270deg,
    #ff6b6b, #feca57, #48dbfb, #ff9ff3
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
```

补充说明：
- background-clip: text 将背景裁剪为文字形状
- -webkit-text-fill-color: transparent 让文字透明露出背景
- 需要 -webkit- 前缀兼容 Chrome/Safari
- 动画渐变通过 background-position 移动实现