CSS linear-gradient() function—background color gradient design

Table of contents

linear-gradient( ) function

Introduction:

grammar:

Detailed explanation:

For example:

---

linear-gradient( ) function

Introduction:

linear-gradient function is a function in CSS used to create linear gradients. It accepts one or more parameters and uses these parameters to create a gradient.

grammar:

linear-gradient(direction, color-stop1, [color-stop2], ...)

Detailed explanation:

• direction is an optional parameter that specifies the direction of the gradient. Can be , ,  or . The default value is .  to topto rightto bottomto leftto bottom
• color-stop is an optional parameter that specifies the position and color value of each color in the gradient. It consists of two values, The first value is the color value, and the second value is the position of the color (can be a percentage value or a keyword) .

For example:

①The following code creates a linear gradient from top to bottom:

background-image: linear-gradient(to bottom, red, blue);

This will create a gradient from red to blue, with the gradient direction going from top to bottom.

②The following code creates a linear gradient from left to right and specifies the position and color value of each color:

background-image: linear-gradient(to right, yellow  0%, green 50%, blue 100%);

This will create a gradient from yellow to green to blue, with the gradient direction going from left to right. The first color value is yellow at 0%; the second color value is green at 50%; and the third color value is blue at 100%.

③linear-gradient The function also supports multiple color values. For example:

background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);

This will create a gradient from red to orange to yellow to green to blue to indigo to violet, with the gradient direction going from top to bottom.