如何设置文字的渐变色

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

参考示例链接 https://css-tricks.com/snippets/css/gradient-text/

借助mask-image属性
.text-gradient {

display: inline-block;
font-family: '微软雅黑';
font-size: 10em;
position: relative; 

}

.text-gradient[data-text]::after {

content: attr(data-text);  
color: green;  
position: absolute;  
left: 0;  
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));

}

亲可以利用 background-clip 属性来为文字设置渐变背景，例如：

.gradient-text {
font-size: 18px;
background: -webkit-linear-gradient(red, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

详情可以查看 mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

参考这篇文章 https://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/