线性渐变linear-gradient

从上到下渐变background: linear-gradient(to bottom,red,blue);
从左到右渐变background: linear-gradient(to right,red,blue);
从左上角到右下角渐变background: linear-gradient(to bottom right,red,blue);
彩虹渐变background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);

<div id="con"></div>
<div id="conn"></div>
<div id="connn"></div>
<div id="connnn"></div>
#con{
		width:200px;
		height:100px;
		background: linear-gradient(to bottom,red,blue);
	}
#conn{
		width:200px;
		height:100px;
		background: linear-gradient(to right,red,blue);
	}
#connn{
		width:200px;
		height:100px;
		background: linear-gradient(to bottom right,red,blue);
	}
#connnn{
		width:200px;
		height:100px;
		background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
	}

径向渐变radial-gradient

径向渐变默认为椭圆形

匀称径向渐变background: radial-gradient(red,green,blue);
不匀称径向渐变background: radial-gradient(red 5%,green 15%,blue 60%);
圆形径向渐变background: radial-gradient(circle red,green,blue);

<div class="con"></div>
<div class="conn"></div>
<div class="connn"></div>
.con{
		width:200px;
		height:100px;
		background: radial-gradient(red,green,blue);
	}
.conn{
		width:200px;
		height:100px;
		background: radial-gradient(red 5%,green 15%,blue 60%);
	}
.connn{
		width:200px;
		height:100px;
		background: radial-gradient(circle,red,green,blue);
	}

长风破浪会有时，直挂云帆济沧海。