字体图标、文字、背景色的css渐变

预览效果 ：

 

<style>
 .type i{   
			background: -webkit-linear-gradient(-90deg, #caff55 20%, #45cd00 60%); /*背景渐变色*/
			-webkit-background-clip: text;  /* 规定背景的绘制区域为文字区域*/
			-webkit-text-fill-color: transparent; /* 文字填充颜色（这里一定要设置 transparent，不然会覆盖底部的背景色）*/
			font-style: normal;
			font-size:30px;
			font-weight:bold;
		}

.box{
	width:300px;
	height:100px;
	color:#fff;
	background: -webkit-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
	background: -moz-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%); 
	background: -o-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%); 
	background: -ms-linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);  
	background: linear-gradient(-90deg, #ff6600 0%, #ff0000 100%);
}

</style>

<div class="type">
	<i class="iconfont icon-remen fs26">☀</i>
	<i class="iconfont icon-remen fs26">❤</i>
	<i class="iconfont icon-remen fs26">渐变字体</i>
</div>

<div class="box"> 背景色渐变</div>