A ramp is three decisions, taken in order
The shape decides what the angle means. The stops decide where the colour is. The interpolation space decides what happens between them, and it is the one that separates a ramp that looks deliberate from one that looks muddy in the middle.
Shape
A linear ramp runs along a line at the angle you set, measured the way CSS measures it: zero points up, ninety points right. A radial ramp runs outward from a point to the farthest corner, which suits a page whose content sits in the middle of the screen. A conic ramp sweeps around a point, and it is the only one of the three that can return to its starting colour, which is why its stop list usually begins and ends on the same value.
Stops
A stop is a colour and a position between nought and one. Two is the common case. A third, placed off centre, is how a ramp gets a knee in it — most of the frame in one tone and a quick fall to another near an edge, which keeps a headline sitting on flat colour while the frame still moves.
Space
Every layer carries its own choice. OKLCH is the default because it holds chroma across the middle of a ramp; sRGB is offered because it is what a browser does by default, and a ramp being matched to an existing stylesheet has to be built the way that stylesheet draws it.
What interpolation space changes, in numbers
The two spaces agree on the ends and disagree in the middle. How much they disagree depends entirely on how far apart the hues are: adjacent hues barely differ, opposite hues differ enough to change what the background is for.
| Ramp | sRGB midpoint | OKLCH midpoint |
|---|---|---|
| Blue to yellow | neutral grey, chroma 0.00 | teal, chroma 0.26 |
| Magenta to green | grey-violet, chroma 0.04 | amber, chroma 0.19 |
| Teal to sea green | chroma 0.075 | chroma 0.074 |
| Light grey to charcoal | chroma 0.00 | chroma 0.00 |
The second row is the one that shows this is a choice rather than a correction. OKLCH keeps the chroma, and it does that by taking the short way round the hue wheel — between magenta and green, that route passes through amber. Neither midpoint is wrong. They are different answers to a question nobody was asked, which is why the control exists.
The last two rows are the honest ones. Hues that sit close together barely move, and a ramp between two neutrals has no chroma to lose at all, so the control does nothing whatever — a tool that implied otherwise would be selling the setting rather than explaining it.
Two limits of a gradient specifically
- A long ramp in eight bits will band, and the dither pass trades that band for grain rather than removing it. The steeper the ramp, the less it matters: a gradient that crosses half the lightness range in 400 pixels has plenty of levels to work with, and one that crosses a tenth of it in 3840 pixels does not.
- The copied declaration and the saved file are the same design and not the same picture. A browser interpolates at the size of the element and applies no dither, so a declaration stretched across a 4K viewport bands where the file does not. Where that matters, take the file.
Questions about ramps
- My two-stop ramp goes grey in the middle. What is happening?
- The midpoint is being computed in the encoded sRGB channels, where the straight line between two saturated hues passes through low chroma. Blue to yellow is the worst case and the one everybody notices. Switch the layer to OKLCH and the same two stops keep their chroma across the middle, because lightness, chroma and hue are interpolated as three separate quantities rather than as three channel values that happen to be stored together.
- How many stops is too many?
- Eight is the practical ceiling here and three is usually plenty. Each extra stop is another place the ramp changes direction, and a background with four direction changes stops reading as a background and starts reading as a pattern. If a ramp needs many stops to look right, the shape is often wrong instead — a radial with two stops does what a linear with five is usually trying to do.
- What angle should a hero gradient run at?
- Something off the axes. A ramp at 0 or 90 degrees has an edge that lines up exactly with the top of the frame, and any banding in it runs parallel to the content, which is where the eye finds it. Between 100 and 200 degrees the steps cross the frame diagonally and are far less visible at the same bit depth. The presets in the library sit in that range for the same reason.
- Is the copied CSS the same picture as the file?
- The same stops, the same angle, the same interpolation space, yes. Two differences are worth knowing. A browser draws the ramp at whatever size the element happens to be, so it rebands differently at different widths, and it applies no dither at all — the grain that the saved file carries is not in the declaration. For a large flat area the file is the safer choice; for something that has to stretch, the declaration is.