html字体颜色渐变

效果图：

 样式

.style1{
	background: linear-gradient(to bottom,#f0610e, #e8771a, #fff34a);
  	-webkit-background-clip: text;
  	color: transparent;
} 
.style2{
	background: linear-gradient(to right,#f0610e, #e8771a, #fff34a);
  	-webkit-background-clip: text;
  	color: transparent;
}

注：color: transparent，设置原字体颜色为透明，

       -webkit-background-clip: text，文本渐变          

linear-gradient() 函数   

        从上到下，蓝色渐变到红色 */ linear-gradient(45deg, blue, red);

        渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red);

        从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red);

        从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);

源代码

<div class="center-in-center">
	<h1 class="style1">从上到下</h1>
	<h1 class="style2">从左到右</h1>
</div>