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

[Canonical HTML page](https://gradiently.design/guide/css-linear-gradient)

Every part of linear-gradient() explained with a live example beside its code, from the default direction to hard stops, layered sheens and smoother OKLCH blends.

## The short version

- A CSS linear gradient is an image the browser draws along a straight line, written with the linear-gradient() function and used anywhere an image is accepted, usually background-image.
- Without a direction, a linear gradient runs from top to bottom, which is the same as 180deg; 0deg points up and angles turn clockwise.
- Colour stops without positions are spread evenly, and two stops at the same position make a hard edge instead of a blend.
- Several gradients can be layered in one background-image, separated by commas, with the first one drawn on top.
- Adding an interpolation method such as in oklch keeps the middle of a blend bright instead of letting it turn grey.

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.

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

The simplest linear gradient: two colours, default direction, with a flat colour underneath as a fallback.

Navy to sky, top to bottom: `linear-gradient(#0f172a, #38bdf8)`

The code above, rendered. No direction means top to bottom.

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](https://gradiently.design/guide/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.

| Part | Example | What it does |
| --- | --- | --- |
| Direction as an angle | `135deg`, `0.25turn` | Sets the angle of the gradient line. 0deg points up, angles turn clockwise. |
| Direction as keywords | `to right`, `to top left` | Points the line at a side or corner of the box. |
| Interpolation method | `in oklch`, `in srgb` | Chooses the colour space the blend is calculated in. |
| Colour stop | `#38bdf8 40%` | A colour, optionally with one or two positions along the line. |
| Colour hint | `30%` between two stops | Moves the halfway point of the blend between its neighbours. |

The pieces of linear-gradient(), in the order they appear. Only the colour stops are required.

The full reference lives on [MDN's linear-gradient() page](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), 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`.

- 0deg: bottom to top: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: left to right: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: the default: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: top left to bottom right: `linear-gradient(135deg, #1e1b4b, #f472b6)`

One indigo to pink pair at four angles. The first colour always sits at the start of the line.

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](https://gradiently.design/guide/gradient-angle).

> **Why the corners always match** The gradient line is stretched so that its first and last colours land exactly in the corners. For a box of width W and height H at angle A, its length is `abs(W × sin A) + abs(H × cos A)`. That is why a 135deg gradient on a very wide element looks almost horizontal.

## 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.

```css
/* 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);
```

Three ways to shape the same blend. Positions can also be lengths such as 120px.

- Even spacing: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Hint at 20%: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Held band, 35% to 65%: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

The same deep ocean to ice palette, shaped three ways by positions and hints.

## 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.

- Half and half split: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Three amber bands: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Diagonal hazard stripes: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Hard stops draw shapes instead of blends. There are many more in [CSS patterns](https://gradiently.design/guide/css-patterns).

## 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.

```css
.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);
}
```

A sheen layered over a base gradient. The first gradient in the list is drawn on top.

Stacking is also the basis of richer effects: layered radial glows make a [mesh gradient in CSS](https://gradiently.design/guide/css-mesh-gradient), and a thin noise layer on top hides stepping, as explained in [gradient banding](https://gradiently.design/guide/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](https://gradiently.design/guide/css-gradient-oklch) covers hue directions and fallbacks.

- Default sRGB: grey middle: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: cleaner middle: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: travels through hue: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blue to yellow three ways. Only the interpolation method changes.

### Avoid

- Long blends between opposite hues in plain sRGB
- `to top right` when several differently shaped cards must share one direction
- Fading to `white` when you mean to fade out; use `transparent`
- Very smooth, dark, wide blends with no grain, which band on many screens

### Do

- Add `in oklch` or a middle stop to keep blends vivid
- Use one angle, such as `135deg`, for a consistent system
- Fade layers to `transparent` so what is underneath shows
- Add a faint noise layer over large dark gradients

## 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](https://caniuse.com/css-gradients) 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.

```css
.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);
}
```

Progressive enhancement: each line overrides the one before only if the browser understands it.

If you would rather start from a blend that already has character than tune stops by hand, a [gradient generator](https://gradiently.design/guide/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.

## FAQ

### How do I make a linear gradient in CSS?

Set `background-image: linear-gradient(direction, colour1, colour2)` on an element, for example `linear-gradient(90deg, #0f172a, #38bdf8)`. Add a `background-color` before it as a fallback.

### What is the default direction of a CSS linear gradient?

Top to bottom, the same as `to bottom` or `180deg`. The first colour appears at the top and the last at the bottom.

### How do I make a hard line in a linear gradient?

Give two neighbouring stops the same position, such as `#f97316 50%, #1e293b 50%`, or use `0` as the second position so it is clamped to the previous stop.

### Why does the middle of my gradient look grey?

Hex colours blend in sRGB by default, which dulls the midpoint between distant hues. Add `in oklch` or `in oklab` after the angle, or insert a brighter middle stop.

### Is 45deg the same as to top right?

Only on a square. `45deg` always points at 45 degrees, while `to top right` adjusts its angle so the middle colour runs between the other two corners of the box.