CSS SNIPPET

  返回

渐变色的文本  视觉效果

为文本设置渐变色。

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;
}
效果演示

Gradient text

代码说明
  1. background: -webkit-linear-gradient(...) 为文本元素设置渐变背景。
  2. webkit-text-fill-color: transparent 使用透明色填充文本。
  3. webkit-background-clip: text 用文本剪切北京,用渐变背景填充文本。
浏览器支持

98.7%

⚠️ 使用了非标准属性。