CSS Gradients

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

CSS Gradients

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

CSS defines two types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

Linear Gradient

To create a linear gradient you must define at least two color stops.

Diagonal Linear Gradient

Radial Gradient

A radial gradient is defined by its center.

Example

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}