1-从上往下线性渐变:
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
2-从上往下线性渐变:
background: -webkit-linear-gradient(left,red,blue);
background: -o-linear-gradient(left,red,blue);
background: -moz-linear-gradient(left,red,blue);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085015731-1181753329.png)
3-对角线性渐变:
background: -webkit-linear-gradient(left top,red,blue);
background: -o-linear-gradient(left,red top,blue);
background: -moz-linear-gradient(left top,red,blue);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085023930-1903565779.png)
4-角度线性渐变:
background: -webkit-linear-gradient(45deg,red,blue);
background: -o-linear-gradient(45deg,red ,blue);
background: -moz-linear-gradient(45deg ,red,blue);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085032874-1080883169.png)
5-多中颜色线性渐变:
background: -webkit-linear-gradient(green,red,blue);
background: -o-linear-gradient(green,red ,blue);
background: -moz-linear-gradient(green ,red,blue);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085041406-1934874003.png)
6-透明线性渐变:
background: -webkit-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
background: -o-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
background: -moz-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085050468-1611913869.png)
7-重复线性渐变:
background: -webkit-repeating-linear-gradient(red ,green 20%,blue 20%);
background: -o-repeating-linear-gradient(rgba(red ,green 20%,blue 20%);
background: -moz-repeating-linear-gradient(red ,green 20%,blue 20%);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085059856-1030110494.png)
8-径向渐变--均匀分布:
background: -webkit-radial-gradient(red ,green);
background: -o-radial-gradient(red,green);
background: -moz-radial-gradient(red,green);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085108597-943942508.png)
9-径向渐变--不均匀分布:
background: -webkit-radial-gradient(red 10% ,green 40%);
background: -o-radial-gradient(red 10% ,green 40%);
background: -moz-radial-gradient(red 10% ,green 40%);
![](https://images2018.cnblogs.com/blog/732349/201804/732349-20180411085116113-185520138.png)