How many stops can I use?

As many as you need. Add stop appends another entry at the midpoint, and Remove appears on each row once more than two remain.

What happens if I move a stop past another one?

Nothing breaks. The browser sorts stops by position before painting, so dragging the middle stop to the left of the first simply reorders the ramp.

How do I make a hard edge?

Place two stops at the same position. The transition between them collapses to a line, which is the standard way CSS expresses a hard stop.

Can I build a radial or conic gradient here?

No. This page produces linear ramps only, with the direction given in degrees. Radial and conic generators are separate tools.

What colour does a new stop arrive with?

A random one, chosen the moment Add stop is pressed. It lands at the midpoint of the ramp, so the position is sensible from the start and recolouring it is the only step left.

Multi-Stop Gradient Builder

Stops

Stop 1

Position: 0%

Stop 2

Position: 50%

Stop 3

Position: 100%

Angle

90°

CSS

background: linear-gradient(90deg, #3B82F6 0%, #A855F7 50%, #EF4444 100%);

You Might Also Need

Gradient Color Stop Editor

Add, move and tune individual gradient stops

Conic Gradient Generator

Build conic gradients with center & angle

Multi-Color Picker

Pick several colors at once

The multi stop gradient builder opens with a three-color ramp and lets you add, position and remove stops while the CSS declaration updates live.

What is Multi-Stop Gradient Builder?

The multi stop gradient builder is the general-purpose ramp builder. It starts further along than the other gradient tools in this domain: instead of the usual pair of colours it opens with three — a blue at the start, a purple at the midpoint and a red at the end — so the moment the page loads there is already a multi-stop gradient on screen to work from.

Every stop gets its own row — a colour field and a position slider together — with a Remove button that appears once more than two remain.
The guard matters: a gradient with fewer than two colours has nothing to interpolate between, so the builder refuses to let you get there.
Add stop appends an entry at the midpoint of the ramp rather than at the end, so a new colour is immediately visible and can be dragged either way.

The distinction between this and a two-stop gradient is not just the number of colours. With two stops, every value on the ramp is a straight interpolation between the endpoints, and the only design decision is which two colours. With three or more, the positions matter as much as the colours: stops spread evenly give a smooth progression through the middle colour, while stops pushed towards one end compress the transition and leave flat colour on the other side. Pulling two stops onto the same position produces a hard edge instead of a blend. That is the vocabulary this tool exists to let you use, and it is why the position sliders are as important as the colour fields once you go past two colours.

Stop positions do not have to be in order: the browser sorts them before painting, so dragging the middle stop past the first only reorders the ramp.
Two stops at identical positions produce an abrupt transition rather than an error, which is the standard way CSS builds a hard stop.

The angle slider covers the full circle from zero to three hundred and sixty degrees, and the declaration is always written in degrees rather than as a direction keyword. Copy takes the whole thing as a background declaration. There is no radial or conic option here — this page builds linear ramps — and no interpolation-space control, so the browser's default interpolation applies.

Where a multi-stop gradient is worth the extra complexity is any surface that has to carry a story: a sky going from deep blue through orange to pale yellow, a chart background that signals a threshold, a hero that needs two hues plus a light passage between them. Two colours give a direction; three give a sequence. As a multi stop gradient builder it makes that structure editable rather than hand-written: a gradient with multiple stops can be reshaped by dragging rather than by editing numbers in a text editor. For a three color gradient or any other multi color gradient css, this gradient stops builder keeps the declaration in step with what you see, which is the difference between guessing at a ramp and watching it change.

How to use Multi-Stop Gradient Builder

Start from the three default stops, or recolour them with the colour fields.
Drag the position sliders to control where each colour sits along the ramp.
Use Add stop for more colours — new stops arrive at the midpoint — and Remove to simplify.
Set the angle, then copy the background declaration.

When to use Multi-Stop Gradient Builder vs related tools

Use this when a ramp needs three or more colours, or when stop positions have to be placed precisely. Use the two-stop angle adjuster for simple direction changes, or the stop editor when the axis should stay fixed horizontally. For a two-colour sweep with no interior positions to place, the linear gradient generator is the same builder with fewer controls, and a ramp whose axis should stay put while the stops are placed is the gradient color stop editor.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.