Gradients (linear, radial, conic)

Gradients create smooth color transitions. Linear gradients flow in a direction; radial gradients radiate from a center point; conic gradients rotate around a center. Use them for backgrounds, overlays, and visual effects.

Linear Gradients

CSS

/* Simple linear gradient */
.gradient {
  background: linear-gradient(blue, red);
  /* Top to bottom from blue to red */
}

/* Directional gradient */
.gradient {
  background: linear-gradient(to right, blue, red);
  background: linear-gradient(45deg, blue, red);
}

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

Radial Gradients

CSS

/* Simple radial gradient */
.gradient {
  background: radial-gradient(blue, red);
  /* Center is blue, edges are red */
}

/* Circular radial gradient */
.gradient {
  background: radial-gradient(circle, blue, red);
}

/* Ellipse radial gradient */
.gradient {
  background: radial-gradient(ellipse, blue, red);
}

/* Multiple color stops */
.gradient {
  background: radial-gradient(
    circle,
    white 0%,
    blue 50%,
    black 100%
  );
}

Conic Gradients

CSS

/* Simple conic gradient */
.gradient {
  background: conic-gradient(blue, red, blue);
  /* Rotates around center */
}

/* Color wheel */
.gradient {
  background: conic-gradient(
    from 0deg,
    red, yellow, lime, cyan, blue, magenta, red
  );
}

/* Pie chart */
.gradient {
  background: conic-gradient(
    from 0deg,
    red 0deg 90deg,
    yellow 90deg 180deg,
    green 180deg 270deg,
    blue 270deg 360deg
  );
}

Note

Gradients create smooth color transitions. Linear for directional blends, radial for center-point, conic for rotational. Combine with other properties for effects.

Background images: [background-image](/css/background-image).