How to gradient background color in css


I want to use combination of two or more than two color as a background color of the web page or its part.


To use more than two color you can use Multicolor gradient
#grad {
  background-image: linear-gradient(red, yellow, green);


Linear Gradients (goes down/up/left/right/diagonally):-

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

background-image: linear-gradient(directioncolor-stop1color-stop2, ...);

Radial Gradients (defined by their center):-

A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.

background-image: radial-gradient(shape size at position, start-color, ..., last-color);