Runnable CSS Docs: Gradients

Q: How do I make a radial gradient in CSS?

Use background-image: radial-gradient(#93c5fd, #1e3a8a);. Add a shape and position in front of the colors, such as radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: What is the difference between circle and ellipse in radial-gradient?

ellipse (the default) stretches to the box's proportions, so it is wide in a wide box. circle keeps the gradient round whatever the box's shape.

Q: How do I set the direction of a linear gradient?

Put a direction or angle first: linear-gradient(to right, red, blue) or linear-gradient(45deg, red, blue). The default is to bottom (180deg); 0deg points up and angles turn clockwise.

Q: How do I make hard stripes instead of a smooth blend?

Give two colors the same stop position: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) switches color at the middle with no blend. repeating-linear-gradient repeats a pattern of such stops.

Q: Can I use a gradient as background-color?

No. A gradient is an image, so it goes in background-image or the background shorthand. background-color: linear-gradient(...) is invalid and ignored.

Radial gradients

radial-gradient() blends colors outward from a center point. Like every CSS gradient, it is an image, so it goes in background-image (or the background shorthand):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

The full syntax is radial-gradient(shape size at position, color stops). Everything before the colors is optional.

Part	Values	Default
Shape	`circle`, `ellipse`	`ellipse`
Size	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, or lengths	`farthest-corner`
Position	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Color stops	Two or more colors, each with an optional position

The size keyword decides where the last color is reached: at the closest side of the box, the farthest corner, and so on. Change the values here and watch the gradient redraw:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a, and circle 40px, #f59e0b 99%, transparent (a hard-edged dot).

Linear gradients

linear-gradient() blends along a straight line. Put a direction or an angle first, then the colors:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Angles start at 0deg pointing up and turn clockwise, so 90deg is to right and 180deg is the default to bottom. to right stays physical in right-to-left pages; mirror it yourself if the gradient should follow the reading direction.

Color stops and hard stops

Each color can have a position. Without positions, colors are spaced evenly. When two colors share a position, the change is instant, which is how you draw stripes, flags and progress bars:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

A stop can also take two positions, #111827 12px 24px, which draws a solid band from 12px to 24px.

Conic gradients

conic-gradient() sweeps colors around a center point, like the hands of a clock. With hard stops it draws a pie chart without any images or JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

A chart drawn in CSS is invisible to screen readers, so put the numbers in text as well.

Gradient text

Clip a gradient background to the letters and make the text itself transparent:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Keep a plain color fallback in mind: if the clip fails, the text disappears. Gradient text also has uneven contrast, so use it for large headings only.

Gradients stack with images and other gradients in one background-image list; the background image page covers layers, size and position.

Common mistakes

background-color: linear-gradient(...). A gradient is an image: use background-image or background.
Degrees in the wrong direction. 0deg points up, not right. 90deg goes toward the right.
A gradient on an element with no height. Nothing shows; give it content or a size.
Muddy middle colors. Blending two saturated opposite colors, like red and green, passes through gray-brown in sRGB. Add a middle stop, or blend in another color space: linear-gradient(in oklch, red, green).
Banding on large, subtle gradients. Very close colors across a big area show steps; a little more contrast between stops helps.

Frequently Asked Questions

How do I make a radial gradient in CSS?

Use background-image: radial-gradient(#93c5fd, #1e3a8a);. Add a shape and position in front of the colors, such as radial-gradient(circle at top left, #93c5fd, #1e3a8a).

What is the difference between circle and ellipse in radial-gradient?

ellipse (the default) stretches to the box's proportions, so it is wide in a wide box. circle keeps the gradient round whatever the box's shape.

How do I set the direction of a linear gradient?

Put a direction or angle first: linear-gradient(to right, red, blue) or linear-gradient(45deg, red, blue). The default is to bottom (180deg); 0deg points up and angles turn clockwise.

How do I make hard stripes instead of a smooth blend?

Give two colors the same stop position: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) switches color at the middle with no blend. repeating-linear-gradient repeats a pattern of such stops.

Can I use a gradient as background-color?

No. A gradient is an image, so it goes in background-image or the background shorthand. background-color: linear-gradient(...) is invalid and ignored.

Related concepts