Applet/CSS linear gradient function linear-gradient()

To create a linear gradient, two colors need to be specified, and gradient effects in different directions (specified as an angle) can also be achieved. If no direction is specified, the default gradient is from top to bottom.

CSS syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction: Specify the direction (or angle) of the gradient with an angle value.
• color-stop1, color-stop2: Used to specify the start and stop colors of the gradient.

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);