A Pen by Eric.

A-Pen-by-Eric.markdown

A Pen by Eric

A Pen by Eric on CodePen.

License.

index.html

<h2 class="text-gradient1">携程H5</h2>
<h2 class="text-gradient2">携程H5</h2>

style.css

*{padding:0;margin:0;}
body{font-size:5em;}
.text-gradient1{
	-webkit-mask: -webkit-gradient(linear,0% 0%,0% 100%,from(#623dbd),to(rgba(0, 0, 255, 0)));
	/*此方法原理是利用蒙板的透明度来实现的，而蒙板的颜色并不能用于渐变中，有用的只是alpha值。那么这里的渐变要依赖字体的颜色，也就是说，只支持单色渐变。*/
}
.text-gradient2{
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#86b9ff), to(#00181f));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/*此方法原理是将文字挖空,然后设置背景色，从而达到实现彩色渐变，只用webkit内核支持*/
}