使用 background 实现文字渐变色

<div class="box"> 追光的栗子~ </div>


 .box {
    font-size: 40px;
    font-weight: bolder;
    // 为文本元素提供渐变背景
    background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
    // 用文本剪辑背景，用渐变背景作为颜色填充文本
    -webkit-background-clip: text;
    // 使用透明颜色填充文本
    -webkit-text-fill-color: transparent;
}

效果展示

使用 mask-image 实现文字渐变色

<div class="box"> 追光的栗子~ </div>

.box {
    font-size: 40px;
    font-weight: bolder;
    color: aqua;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
  }

效果展示

<div text="追光的栗子 ~" class="text-gradient">追光的栗子 ~ </div>

.text-gradient {
    position: relative;
    color: blue;
    font-size: 30px;
    font-weight: bold;
}
.text-gradient:before {
    content: attr(text);
    position: absolute;
    z-index: 10;
    color: orange;
    -webkit-mask: linear-gradient(to right, transparent, orange);
}

效果展示