语法

//线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

//角度渐变
background-image: linear-gradient(angle, color-stop1, color-stop2);

//径向渐变
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

例

div{
    background-image: linear-gradient(#e66465, #9198e5);
}

试一试

渐变示例

示例作用
linear-gradient(#e66465, #9198e5); 从上到下（默认值）
linear-gradient(to right, red , yellow);从左到右
linear-gradient(to bottom right, red, yellow);从左上到右下
linear-gradient(-90deg, red, yellow); 根据角度控制
linear-gradient(red, yellow, green); 设置多个颜色节点
linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));透明度渐变
repeating-linear-gradient(red, yellow 10%, green 20%);重复渐变
radial-gradient(red, yellow, green); 径向渐变 - 颜色均匀分布（默认）
radial-gradient(red 5%, yellow 15%, green 60%);径向渐变 - 颜色不均匀分布
radial-gradient(circle, red, yellow, green);形状渐变 - circle（默认）圆形，ellipse：椭圆

角度渐变 示例
径向渐变 示例

通过角度控制，角度示意图：

练习：

画一道彩虹。

试一试