CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

Syntax:

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

For example:

/* By default, the gradient goes from top to bottom  */
.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(dodgerblue, yellow);
}

/* Change direction from left to right */
.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, dodgerblue, yellow);
}

/* Direction starts from 45 deg, yellow starts from 30% */
.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, dodgerblue, yellow 30%);
}

CSS Gradient Generator can make your life easier.