CSS Gradients

Create smooth color transitions with linear, radial, and conic gradients using CSS gradient functions.

On this page

Linear Gradients

A linear gradient transitions colors along a straight line. You can control the direction and add multiple color stops.

.box {
  background: linear-gradient(to right, #ff4d4d, #ffd24d);
}

You can also use angles. 0deg points upward and angles rotate clockwise.

.box {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
}

Color stops can define where each color should appear:

.box {
  background: linear-gradient(to bottom, #111 0%, #444 40%, #eee 100%);
}

Tip: Gradients can be used anywhere an image can be used, including background-image and border-image.

A radial gradient transitions colors outward from a center point (circle or ellipse).

.box {
  background: radial-gradient(circle, #34d399, #065f46);
}

You can control the position of the gradient center:

.box {
  background: radial-gradient(circle at top left, #60a5fa, #1e3a8a);
}

You can also define color stops for more precise control:

.box {
  background: radial-gradient(ellipse at center, #fff 0%, #ddd 35%, #999 100%);
}

A conic gradient transitions colors around a center point (like a pie chart). It is useful for rings, charts, and colorful backgrounds.

.box {
  background: conic-gradient(#f97316, #facc15, #22c55e, #3b82f6, #a855f7);
}

You can control the rotation and the center point:

.box {
  background: conic-gradient(from 90deg at 50% 50%, #ef4444, #06b6d4, #ef4444);
}

Color stops can also be placed at specific angles:

.box {
  background: conic-gradient(
    from 0deg,
    #22c55e 0deg 120deg,
    #facc15 120deg 240deg,
    #ef4444 240deg 360deg
  );
}

← CSS Colors