A CSS gradient is an image that the browser draws for you, with no image file to download. Gradients scale to any size, can be changed with a line of code, and load instantly. This guide explains the three kinds of gradient and the details that cause most confusion.

To build one visually and copy the CSS, use the QuickToolsBox CSS Gradient Generator.

Gradients are images, not colors

A gradient is used where an image goes, so it belongs in background or background-image, not background-color.

.hero {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}

It is a good habit to put a plain background color first as a fallback. If a gradient fails to load or an old browser does not understand it, the color shows instead.

.hero {
  background-color: #2563eb;
  background-image: linear-gradient(90deg, #2563eb, #7c3aed);
}

Linear gradients

A linear gradient blends colors along a straight line.

background: linear-gradient(to right, #f97316, #ec4899);
background: linear-gradient(135deg, #0ea5e9, #22c55e);

The direction can be a keyword such as to right or to bottom right, or an angle in degrees. Angles work like this: 0deg points up, 90deg points right, 180deg points down (the default when you give no direction), and 270deg points left. Angles are measured clockwise.

Color stops

Each color in a gradient is a color stop. You can add a position to each one.

background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #22c55e 100%);

Without positions, the stops are spaced evenly. With positions you can bunch colors together or leave larger areas of a single color. Positions can use percentages or lengths such as 120px.

Hard edges and stripes

If two stops share the same position, the color changes abruptly instead of blending. That makes stripes and split backgrounds.

background: linear-gradient(90deg, #2563eb 50%, #e5e7eb 50%);

This gives a left half in blue and a right half in gray, with a sharp line between them. The repeating-linear-gradient() function repeats a pattern of stops, which makes it possible to draw diagonal stripes with a few lines.

background: repeating-linear-gradient(45deg, #fde68a 0 10px, #fef3c7 10px 20px);

Radial gradients

A radial gradient spreads out from a center point as a circle or ellipse.

background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #b45309);

circle or ellipse sets the shape, and at 30% 30% moves the center. A radial gradient with the center near a corner makes a soft glow or spotlight, which is a good way to give a card or button some depth.

Conic gradients

A conic gradient sweeps colors around a center point, like the face of a clock. It is useful for color wheels and pie-style charts.

background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #ef4444);

Repeating the first color at the end makes the circle close without a visible seam. With hard stops you can draw a simple pie chart.

background: conic-gradient(#2563eb 0 40%, #f59e0b 0 70%, #22c55e 0 100%);

Layering gradients

The background property accepts a list, so you can stack several gradients, or a gradient over an image. The first item is on top.

background:
  linear-gradient(to bottom, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0)),
  url("photo.jpg") center / cover;

This darkens the top of a photo so white text stays readable, which is one of the most common practical uses.

Transparency

Gradients can fade to transparent. For smooth results, fade between two versions of the same color rather than to the word transparent, since some older implementations blend toward transparent black, which can leave a gray tint.

background: linear-gradient(to bottom, rgb(37 99 235 / 1), rgb(37 99 235 / 0));

Common problems

  • Banding. On large, subtle gradients, you may see visible steps between shades. Using a little more contrast between the colors, or overlaying a very light noise texture, hides it.
  • Muddy middles. Blending two vivid colors can pass through a dull gray, for example blue to orange. Adding a third stop in the middle with a brighter color avoids it.
  • Unreadable text. Text on a gradient can pass through areas with poor contrast. Check contrast against both the lightest and darkest parts the text covers, and consider a darkening overlay.
  • The gradient seems to do nothing. Check that it is on background or background-image, and that the element has a size. An empty element with no height shows nothing.
  • Animating gradients. Browsers cannot smoothly animate between two gradient values directly. A common workaround is to make the background larger than the element and animate background-position.

Performance and accessibility

Gradients are cheap compared to downloading an image, though very large animated gradients can cost performance on slow devices. Gradients are decoration, so make sure that information is never carried by color alone, and keep the text contrast high enough to read.