CSS Gradients: Complete Guide (Linear, Radial, Conic)

CSS gradients let you paint smooth transitions between colors without loading a single image file. This guide covers all three gradient families – linear, radial and conic – plus color stops, hints, hard stops, repeating patterns, color spaces and how to keep text readable on top. Every snippet is plain CSS you can paste into a stylesheet, and you can build or tweak any of them visually in our CSS gradient generator.

How CSS gradients work

A gradient is not a color. In the specification it is a kind of image: MDN describes the gradient data type as “a special type of <image>” (MDN, Using CSS gradients). That single fact explains most early confusion:

• A gradient goes in background-image (or the background shorthand), border-image, mask-image or list-style-image – anywhere an image is allowed.
• It does not go in background-color. Put a solid color there as a fallback.
• Because it is an image, you can layer several gradients in one background-image, separated by commas, just like several pictures.

.card {
  background-color: #c4623a; /* fallback */
  background-image: linear-gradient(#e9b496, #c4623a);
}

The browser draws the gradient at the size of the box, so it stays crisp at any zoom level and costs no network request.

Linear gradients

linear-gradient() blends colors along a straight line. With no direction it runs top to bottom. You can set the direction with a keyword or an angle:

background-image: linear-gradient(to right, #f3dccf, #a34a28);
background-image: linear-gradient(135deg, #f3dccf, #a34a28);

Angles follow a clock: 0deg points up, 90deg points right, and angles grow clockwise (MDN). Keywords such as to bottom right aim at the corner itself, so the angle changes with the box’s shape; a fixed angle like 135deg does not. Use keywords when the gradient should meet a corner, and angles when it should look the same on boxes of every shape.

Radial gradients

radial-gradient() spreads colors outward from a point. By default the center is 50% 50%, the shape is an ellipse that matches the box, and the gradient reaches the farthest corner (MDN).

/* A soft spotlight in the top-left area */
background: radial-gradient(circle at 20% 20%, #fff8 0, transparent 40%), #f7f4ec; /* a plain color is allowed only as the last layer of the shorthand */

You control three things:

1. Shape: circle or ellipse.
2. Size: closest-side, closest-corner, farthest-side, farthest-corner, or explicit lengths.
3. Position: at followed by any position, such as at top, at 30% 70% or at 2rem 50%.

Radial gradients are ideal for vignettes, glows and the light spots used in glass and “aurora” backgrounds.

Conic gradients

conic-gradient() sweeps colors around a center point, like the hand of a clock. It starts at the top and turns clockwise, and its stop positions are angles or percentages – lengths are not allowed (MDN).

/* A simple pie chart: 40% / 35% / 25% */
.pie {
  border-radius: 50%;
  background-image: conic-gradient(#a34a28 0 40%, #e9b496 0 75%, #2f6b4f 0);
}

Conic gradients make pie charts, color wheels and loading rings possible with one element. Pair a chart like this with a visible legend or a data table; a gradient alone is not accessible data.

Color stops, hints and hard stops

Every gradient needs at least two color stops. Without positions they are spread evenly from 0% to 100%. Adding positions gives you precise control.

Positioned color stops

background-image: linear-gradient(90deg, #2a1f1a 0%, #a34a28 60%, #e9b496 100%);

Here the dark espresso holds at the left edge and the transition to terracotta happens over the first 60%.

Color hints

A color hint is a bare position between two stops. It moves the midpoint of that transition: linear-gradient(to top, lime, 20%, cyan) reaches the halfway color only 20% of the way along, instead of at the default 50% (MDN). Hints are handy for making a fade linger on one side.

Hard stops

Give two neighbouring stops the same position and the browser draws a sharp line instead of a fade. A stop can also take two positions, which is a shorter way to write the same thing:

/* Two-tone split, both versions identical */
background-image: linear-gradient(90deg, #f7f4ec 50%, #2a1f1a 50%);
background-image: linear-gradient(90deg, #f7f4ec 0 50%, #2a1f1a 50% 100%);

Hard stops are how stripes, flags, progress bars and the pie chart above are drawn.

Repeating gradients

The repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient() functions repeat their stops forever. The length of one repeat is the distance between the first and last stop (MDN).

/* Diagonal warning stripes, 12px wide */
background-image: repeating-linear-gradient(
  45deg,
  #2a1f1a 0 12px,
  #e9b496 12px 24px
);

Combine repeating gradients with hard stops for stripes, checkerboards and grid lines, and with soft stops for subtle textures.

Color spaces: why some CSS gradients look muddy

When a gradient blends two colors it has to pick a path through a color space. For backwards compatibility, gradients between legacy colors – hex, rgb(), hsl() and named colors – are blended in sRGB; the CSS Color Level 4 changelog records that interpolation between legacy sRGB colors is “(once again) in sRGB space, for compatibility” (W3C, CSS Color 4). Blending distant hues in sRGB can pass through a greyish, darker middle.

You can choose a better space with a color interpolation method at the start of the gradient (MDN, color-interpolation-method):

background-image: linear-gradient(in oklab to right, blue, yellow);
background-image: linear-gradient(in oklch to right, blue, yellow);
background-image: linear-gradient(in oklch longer hue to right, red, red); /* full rainbow */

• in oklab blends in a perceptual space, so lightness changes evenly and midpoints stay clean.
• in oklch is the polar version of Oklab. It keeps colors vivid by rotating the hue, and shorter hue (the default), longer hue, increasing hue or decreasing hue choose the direction around the color wheel.

Keep a plain sRGB gradient before the in oklch one as a fallback for older browsers: the browser ignores the declaration it does not understand.

.hero {
  background-image: linear-gradient(to right, #1e3a8a, #facc15);
  background-image: linear-gradient(in oklch to right, #1e3a8a, #facc15);
}

Our gradient generator previews OKLCH and Oklab blends, adds the classic sRGB fallback declaration to its export automatically, and checks text contrast over the whole gradient.

Layering multiple gradients

Because gradients are images, you can stack them. The first one listed is drawn on top:

.panel {
  background-image:
    radial-gradient(circle at 15% 20%, #ffffff55 0, transparent 35%),
    radial-gradient(circle at 85% 80%, #e9b49666 0, transparent 40%),
    linear-gradient(160deg, #3a2b23, #2a1f1a);
}

Layering soft radial “lights” over a dark linear base is the core of most modern hero and glass backgrounds. Use transparent stops (transparent or colors with alpha) so lower layers show through.

Gradients beyond backgrounds: borders and masks

Anywhere CSS accepts an image, it accepts a gradient, which opens up two very useful tricks.

Gradient borders. border-image can take a gradient, but it ignores border-radius, so rounded corners disappear. For a rounded gradient border, paint two background layers instead: a solid inner layer clipped to the padding box and the gradient clipped to the border box.

.gradient-border {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fffdf8, #fffdf8) padding-box,
    linear-gradient(135deg, #e9b496, #a34a28) border-box;
}

Fading content out. A gradient used as a mask controls transparency instead of color: opaque parts of the mask show the element, transparent parts hide it. This is a clean way to fade the end of a scrolling list or a long excerpt without covering it with a colored overlay that might not match the background.

.excerpt {
  mask-image: linear-gradient(to bottom, black 70%, transparent);
}

Because the mask only changes transparency, the fade works on any background, including images and other gradients. Remember that faded text is still in the page: if it carries meaning, provide a “Read more” link rather than relying on the fade alone.

Keeping text readable on CSS gradients

A gradient changes color across the box, so text that is readable on one side may fail on the other. WCAG 2.2 Success Criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text – 18 point, or 14 point bold (W3C, Understanding 1.4.3). With gradients:

• Check the weakest point. Measure the text color against the gradient color closest to it in lightness, usually one end, not the middle.
• Add a scrim. A semi-transparent dark or light layer behind the text evens out the contrast.
• Keep a solid fallback. If the gradient does not render, the background-color underneath must still give readable text.

Our color contrast checker gives the WCAG ratio for any pair, so test both ends of your gradient against the text color.

Worked example: a warm hero background

Here is a complete example built in the gradient generator and exported as CSS. The goal: a dark, warm hero with a soft glow behind the headline and cream text on top.

.hero {
  color: #f7f4ec;
  background-color: #2a1f1a; /* fallback and contrast base */
  background-image:
    radial-gradient(60% 80% at 75% 30%, #a34a2866 0, transparent 70%),
    linear-gradient(160deg, #3a2b23 0%, #2a1f1a 100%);
  background-image:
    radial-gradient(60% 80% at 75% 30%, #a34a2866 0, transparent 70%),
    linear-gradient(in oklch 160deg, #3a2b23 0%, #2a1f1a 100%);
}

Cream #f7f4ec on the darkest stop #2a1f1a is well above 4.5:1, and the glow is kept to a translucent terracotta so the lightest part of the background stays dark enough behind the text – the check worth repeating with the contrast checker whenever you brighten the glow.

CSS gradients cheat sheet

Where to go next

• Avoid the most common problems – banding, muddy midpoints and unreadable text – in CSS gradient mistakes and how to fix them.
• Put a gradient inside your headings with how to add a gradient to text in CSS.
• Build, preview and export any gradient – including mesh-style layers and grain – in the CSS gradient generator, then check your text colors with the color contrast checker.

The full syntax is defined in the W3C CSS Images Module; MDN’s guide is the most readable companion to it.