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.
On this page
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.
#1e3a8a, #f472b6What happens
#1e3a8a 20%, #f472b6 80%What happens
#1e3a8a, 30%, #f472b6What happens
#1e3a8a 50%, #f472b6 50%What happens
#1e3a8a 0 40%, #f472b6 40% 100%What happens
#1e3a8a 10px, #f472b6 200pxWhat happens
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.
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.
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.
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.
/* 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%);
}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.
- 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 walks through the full syntax, and 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile