CSS linear gradient: the complete guide to linear-gradient()

A CSS linear gradient is an image the browser draws along a straight line, blending from one colour to the next. You write it with the linear-gradient() function and use it anywhere CSS accepts an image, most often background-image. It needs no file, scales to any size without blurring, and costs nothing to download. The shortest useful version is two colours: linear-gradient(#0f172a, #38bdf8) fades from deep navy at the top to sky blue at the bottom.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

This guide goes through every part of the function in the order you meet it. If you want the wider picture of how linear gradients compare with radial, conic and mesh blends, start with the types of gradients.

The linear-gradient() syntax

The function takes an optional direction, an optional colour interpolation method, and then a list of at least two colour stops. Everything is separated by commas except the direction and the interpolation method, which share the first argument.

The full reference lives on MDN's linear-gradient() page, which also documents the exact grammar from the CSS Images specification.

Gradient angles and direction keywords

Angles follow a compass: 0deg points up, 90deg points right, 180deg points down and 270deg points left. The gradient starts on the opposite side and travels towards the direction you give, so 90deg runs from left to right. You can also write turn, rad or grad, where 0.25turn equals 90deg. The default, when you give nothing, is to bottom.

Corner keywords are not the same as 45 degree angles. to top right tilts the line so that the middle colour runs exactly between the other two corners, whatever the shape of the box. On a wide banner that line is much flatter than 45deg, which always points at 45 degrees and ignores the box shape. Use keywords when the blend should respect the corners, and angles when several elements of different shapes must share one direction. There is more on choosing directions in gradient angles.

Colour stops, positions and hints

Stops without positions are spaced evenly, so three colours sit at 0%, 50% and 100%. Give a stop a position in percent or a length to move it. Give it two positions and the colour holds solid between them. Put a lone percentage between two stops and it becomes a hint: the point where the blend reaches its halfway colour, which makes one side of the transition quicker than the other.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Hard stops for stripes and splits

When two stops share a position, there is no room to blend, so you get a crisp edge. Browsers also clamp a stop that comes earlier than the one before it, which gives a handy shortcut: #f97316 50%, #1e293b 0 means the second colour starts exactly where the first ends. Repeat the idea with repeating-linear-gradient() and you have stripes.

Layering several gradients in one background

background-image accepts a comma-separated list, and the first image is painted on top. Layers only show through each other where they are transparent, so the upper gradients usually fade to transparent. Modern browsers blend in premultiplied alpha, so fading to transparent no longer drags a grey tint into the colour the way it once did. Pair layers with background-size and background-repeat when a layer should cover only part of the box.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

Stacking is also the basis of richer effects: layered radial glows make a mesh gradient in CSS, and a thin noise layer on top hides stepping, as explained in gradient banding.

Smoother blends with colour interpolation

When every colour is written in a legacy format such as hex, rgb() or hsl(), the browser blends in sRGB for backwards compatibility. sRGB blends between distant hues pass through dull, greyish middles: blue to yellow is the classic case. Adding in oklab or in oklch asks for a perceptual colour space, which keeps the middle lighter and more even. The dedicated guide to OKLCH gradients in CSS covers hue directions and fallbacks.

Browser support and fallbacks

linear-gradient() works unprefixed in every current browser, so the old -webkit- versions can go. Interpolation methods, two-position stops and hints are newer; check caniuse for the details. The safest pattern is a flat background-color first, then the gradient, then any enhanced version in a later declaration, which older browsers skip because they cannot parse it.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

If you would rather start from a blend that already has character than tune stops by hand, a gradient generator or a library of ready-made backgrounds saves time. Either way, keep the code: a gradient in CSS stays sharp at every size and weighs a few bytes.