CSS 字体颜色渐变

html

<span>
    这是一个渐进色的文字
</span>

CSS 

span {
    font-size: 36px;
    background: linear-gradient(to right,red, green);
    background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;    
    color: transparent;
}

效果

说明

1、文字 color 没有渐变设置，这里使用 background 做背景渐进色，然后设置 background-clip:text 裁剪，最后让 color 为透明。以此达到渐变效果；

2、一定要先设置 background 再 设置 background-clip 做裁剪，是有先后顺序的。否则，无效！！！

注意：目前只在 Chrome 和 Microsoft Edge上测试可用。