CSS Gradients

CSS gradients create smooth color transitions without using images. They include linear, radial, and conic gradients.

Gradient Types

linear-gradient() creates gradients along a straight line.

radial-gradient() creates circular gradients from center outward.

conic-gradient() creates gradients rotating around a center point.

Gradients are images and used with background-image.

Multiple color stops can be defined.

/* Linear gradient */
.linear {
  background-image: linear-gradient(to right, red, yellow);
}

/* Diagonal gradient */
.diagonal {
  background-image: linear-gradient(45deg, blue, green);
}

/* Multiple color stops */
.multi {
  background-image: linear-gradient(
    to bottom,
    red 0%,
    yellow 50%,
    green 100%
  );
}

/* Radial gradient */
.radial {
  background-image: radial-gradient(circle, white, blue);
}

/* Conic gradient */
.conic {
  background-image: conic-gradient(red, yellow, green, blue, red);
}