css3字体颜色渐变

效果图:

代码:

<span class="titleName">这是个测试字体</span>

.titleName {
   background: linear-gradient(#ffffff,50%,#7e7e7e);
   -webkit-background-clip: text;
   color: transparent;
}

-webkit-background-clip: text;
-webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
首先：给外层div来一个渐变。
其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；
最后：把文字变透明：可以用rgba给文本填充透明颜色或者直接设置color: transparent;