SOURCE

<h1 class="test1">HTML5+CSS3</h1>
<h1 class="test2">HTML5+CSS3</h1>
<h1 class="test3">HTML5+CSS3</h1>
<h1 class="test4">HTML5+CSS3</h1>
<h1 class="test5">HTML5+CSS3</h1>
<h1 class="test6">放射状渐变</h1>
<h1 class="test7">放射状渐变</h1>

.test1{
    background: linear-gradient(to right,yellow,blue);
}
.test2{
    background:linear-gradient(to left,yellow,green);
}
.test3{
    background: linear-gradient(to right,yellow, red, blue);
}
.test4{
    background: linear-gradient(-180deg,yellow,green)
}
.test5{
    /*代表30%处的颜色黄色*/
    background: linear-gradient(45deg, yellow 30%,red, orange);
}
.test6{
    background: radial-gradient(circle 50px,yellow ,red);
}
.test7{
    background: radial-gradient(ellipse ,yellow,red);
}