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>