css彩色文字-文字色渐变

文字颜色上下渐变

<div class="font">
          <p>文字颜色渐变</p>
</div>
.font {
        font-size: 60px;
        margin-top: 100px;
        font-weight: bold;
        background-image: -webkit-linear-gradient(bottom, #b61915, #ffff00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

可以根据不同需要改变渐变起始位置，如上述代码上下渐变可用bottom，也可左右渐变改为left或者right即可。