# Gradient color stops: placing colours for smooth blends

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

Two gradients with identical colours can look nothing alike. The difference is where the stops sit and how the blend travels between them. This is the part of a gradient most people never touch.

## The short version

- Gradient color stops are the points along a gradient where a specific colour is reached, written as a colour followed by a position such as `#7c3aed 40%`.
- Stops without positions are spread evenly, which is rarely the most natural looking choice.
- A colour hint is a lone percentage between two stops that moves the midpoint of their blend without adding a colour.
- Two stops at the same position create a hard edge, which is how stripes and sharp bands are made in CSS.
- Adding several intermediate stops that follow an easing curve removes the visible edge where a linear fade begins and ends.

**Gradient color stops** are the points where a gradient reaches a specific colour. In CSS each stop is a colour and an optional position, such as `#7c3aed 40%`, and the browser blends in a straight line between neighbouring stops. Where you place them decides almost everything: whether a blend feels smooth or abrupt, whether one colour dominates, and whether the eye sees a seam where a fade starts. Moving stops is often a bigger improvement than changing colours.

## How gradient color stops work

A gradient line runs from 0 percent to 100 percent. Each stop pins a colour to a point on that line. Leave the positions out and the browser spaces the stops evenly, so three colours land at 0, 50 and 100 percent. Between each pair the colour changes at a constant rate. The full syntax is documented on [MDN's linear-gradient() reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| You write | What happens |
| --- | --- |
| `#1e3a8a, #f472b6` | Two stops at 0% and 100% |
| `#1e3a8a 20%, #f472b6 80%` | Solid navy until 20%, blend, solid pink after 80% |
| `#1e3a8a, 30%, #f472b6` | A colour hint: the midpoint moves to 30% |
| `#1e3a8a 50%, #f472b6 50%` | A hard edge at the centre, no blend |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Double position: two solid bands |
| `#1e3a8a 10px, #f472b6 200px` | Lengths work as well as percentages |

Stop syntax in CSS. The same ideas apply in Figma, Photoshop and every gradient editor, just with sliders.

## Why evenly spaced stops look artificial

Real light rarely changes at an even rate. A sunset is mostly one colour with a narrow band of change near the horizon; a shadow is mostly mid tone with a short drop at its edge. Even spacing gives each colour the same share, which reads as a chart. Decide which colour leads and let it hold most of the space.

- Even: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Weighted: blue leads: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Weighted: warm top: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

One palette, three placements. The weighted versions feel like a sky at two different moments; the even one feels generated.

## Colour hints: moving the midpoint

A colour hint is a bare percentage placed between two stops. It doesn't add a colour; it moves the point where the blend is exactly halfway. A hint at 20 percent means the colour reaches its midpoint early, so the second colour arrives quickly and then lingers. Hints are the cheapest way to make a two colour gradient feel less mechanical.

- No hint, midpoint 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Hint at 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Hint at 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

The same violet to pink. Moving the hint makes one colour dominate without editing either.

## Hard stops for stripes and bands

When two stops share a position, there is no distance to blend across, so the colour changes instantly. That is how stripes, split backgrounds, progress bars and flags are drawn with nothing but a gradient. The double position syntax, `colour start end`, makes it shorter to write. Repeating gradients take the same idea and tile it, covered in [repeating linear gradients](https://gradiently.design/guide/css-repeating-gradient).

- Half and half: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Three bands: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Diagonal steps: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Hard stops in action. No blending, only edges.

## Eased stops: removing the seam

A linear blend has a visible start and end. Fade a dark scrim to transparent over a photo and you can often see a line where the fade begins, because the rate of change jumps from zero to full speed. Placing several intermediate stops along an easing curve fixes it: the colour starts changing slowly, speeds up, then settles. This is especially useful for overlays behind text and for [transparent gradients](https://gradiently.design/guide/css-gradient-transparent).

```css
/* Linear: a visible edge where the fade starts */
.scrim-linear {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}

/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
  background: linear-gradient(180deg,
    rgba(10, 12, 20, 0) 40%,
    rgba(10, 12, 20, 0.02) 46%,
    rgba(10, 12, 20, 0.08) 52%,
    rgba(10, 12, 20, 0.18) 58%,
    rgba(10, 12, 20, 0.32) 66%,
    rgba(10, 12, 20, 0.48) 74%,
    rgba(10, 12, 20, 0.62) 82%,
    rgba(10, 12, 20, 0.73) 91%,
    rgba(10, 12, 20, 0.8) 100%);
}
```

Both scrims end at the same strength. The eased one has no line where it begins.

> **The same idea in motion** Eased stops are the gradient version of an easing curve in animation. [Easing](https://gradiently.design/guide/easing) explains why ease in out feels natural, and the same reasoning applies here.

## Placing stops: a practical method

1. **Choose the leading colour** Give it 50 to 70 percent of the line. It sets the mood.
2. **Place the change where the eye should go** Put the fastest colour change near the focal point, not in the middle by default.
3. **Add hints before adding colours** If a blend feels off, try moving its midpoint first. Extra colours add complexity.
4. **Check the midpoints** Look at the colour halfway between each pair. If it is grey, add a bridge or blend in OKLCH, as explained in [gradient interpolation](https://gradiently.design/guide/gradient-interpolation).
5. **Ease long fades** For anything fading to transparent or to a flat colour, add intermediate stops so there is no seam.

### Avoid

- Every colour given an equal share
- A new colour added to fix every problem
- Linear fades to transparent behind text
- Hard stops where you meant soft blends

### Do

- One leading colour, others arriving late
- Colour hints to shift a blend
- Eased stops for scrims and fades
- Hard stops only for stripes and bands

If you want to see stops in their simplest form, [CSS linear gradients](https://gradiently.design/guide/css-linear-gradient) walks through the full syntax, and [types of gradients](https://gradiently.design/guide/types-of-gradients) shows how stops behave in radial and conic gradients. In Gradiently, a Mark handles its own blending and light across every size, so you can design straight away and spend the time on the words.

## FAQ

### What is a gradient color stop?

A point along a gradient where a specific colour is reached, written in CSS as a colour with an optional position, such as `#7c3aed 40%`.

### What happens if I don't give stops a position?

The browser spreads them evenly from 0 to 100 percent. Three colours land at 0, 50 and 100 percent.

### What is a colour hint in a CSS gradient?

A lone percentage between two stops, such as `#4c1d95, 25%, #f9a8d4`. It moves the halfway point of the blend without adding a colour.

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

Give two stops the same position, for example `#0f172a 50%, #f8fafc 50%`, or use the double position syntax `#0f172a 0 50%, #f8fafc 50% 100%`.

### How do I make a gradient fade smoothly to transparent?

Add several intermediate stops whose opacity follows an ease in out curve. A simple two stop fade often shows a line where it begins.