CSS 渐变文本颜色

>>> 效果预览地址

为文本提供渐变颜色。

HTML

<p class="gradient-text">Gradient text</p>

CSS

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

说明

1. background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
2. webkit-text-fill-color: transparent 使用透明颜色填充文本。
3. webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。