css3文字渐变

知识点

• background: -webkit-linear-gradient ： 渐变背景
• background-clip： 背景图片裁剪范围
• text-fill-color： 文本填充颜色

效果

image.png

代码

<span class="linearGradient">文字渐变色</span>

.linearGradient {
    display: inline-block;
    height: 80px;
    font-size: 50px;
    font-weight: 600;
    // 渐变背景
    background: -webkit-linear-gradient( 120deg, #02a4ff 30%,  #00c5d9);
    // 文字的范围来裁剪背景图片
    -webkit-background-clip: text;
    background-clip: text;
    // 文本填充颜色
    -webkit-text-fill-color: transparent;
  }