CSS provides the styling of background color with gradients. You can blend as many colors to create gradients.

Linear Gradient

The gradient goes from top to bottom, and from left to right. To implement this gradient you need at least two color stops (could be more too).

Eg:

background-image: linear-gradient(100deg, blue, orange, red);

Output:

The degree controls the angle of the gradient, and by using comma-separated values you can add multiple colors for the background.

Note: You can also use repeating-linear-gradient to keep repeating the background for the whole screen.

Radial Gradient

The gradient here is added from the center focal point. The color added first marks the center of the gradient and keeps expanding circularly.

Eg:

background-image: radial-gradient(blue, orange, red);

Output:

This is the default output but you can regulate the amount of each color by adding a percentage with the colors, like radial-gradient(blue 20%, orange, red);

The default shape of the gradient is an ellipse, but you can set it to circle too. Just add a circle ahead of the colors, separated by a comma.

Output:

To use different sizes of the gradient we use the following properties:

Output:

Conic Gradient

The color gradient rotates around a specific point in the form of a cone. By default, the degree of the cone is taken as zero and starts from the center.

Eg:

background-image: conic-gradient(blue, orange, red);

Output: