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上测试可用。 

.font-test{
	// 这里修改渐变的颜色
	background-image: -webkit-linear-gradient(bottom, red, #fd8444, yellow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

效果：

给文字添加渐变

//上下渐变
	p {
	  font-size: 48px;
	  background: -webkit-linear-gradient(#eee, #333);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	}
	//左右渐变
	p{
      width: 200px;//一定要给个宽度不然字少体现不出来
      font-size: 48px;
      background: linear-gradient(to right , #ff8763, #21884f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }