html 渐变背景色，渐变文字颜色

以下渐变方式是通用的但是文字的渐变多了两行代码

 之前只写过背景颜色渐变

 background-image: linear-gradient(#e66465, #9198e5);

 

这次遇到了文字渐变的需求

 

<div>我要渐变</div>

 div{
    background: linear-gradient(to bottom ,red ,black);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
 }

文字渐变必须加这两行代码

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

 

线性渐变 - 从上到下（默认情况下）    

改变方向的话

从左到右的线性渐变：

background-image: linear-gradient(to right, red , yellow); 

从左上角到右下角的线性渐变：

background-image: linear-gradient(to bottom right, red, yellow);

 

 文字也是一样的道理