线性渐变 – 从上到下（默认情况下）
background: linear-gradient(red, blue);

线性渐变 – 从左到右
background: linear-gradient(to right, red , blue);

线性渐变 – 对角
background: linear-gradient(to bottom right, red , blue);

带有指定的角度的线性渐变：
background: linear-gradient(180deg, red, blue);

带有多个颜色结点的从上到下的线性渐变
background: linear-gradient(red, green, blue);

带有彩虹颜色的线性渐变
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

从左到右的线性渐变，带有透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复的线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);

颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, blue);

颜色结点不均匀分布的径向渐变
background: radial-gradient(red 5%, green 15%, blue 60%);

设置形状
background: radial-gradient(circle, red, yellow, green);
background: radial-gradient(ellipse, red, yellow, green);
circle 表示圆形，ellipse 表示椭圆形。

不同尺寸大小关键字的使用
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner

重复的径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);