Gradient generator
Gradient generator
Compose a linear or radial gradient and copy the CSS.
Color stops
- 0%
- 100%
Presets
CSS
background-image: linear-gradient(96deg, #ff5a1f 0%, #8b5cf6 100%);How CSS gradients are built
A gradient is an image, not a colour. That is why it goes in background-image rather than background-color, and why it can be layered with other backgrounds, sized and repeated like any other image.
A linear gradient runs along a line at the angle you give it. Zero degrees points up and the angle increases clockwise, so 90deg runs left to right. Each stop says which colour appears at which percentage along that line, and the browser interpolates between them.
A radial gradient runs outward from a centre instead. The first stop is at the middle and the last is at the edge of the ending shape, which is a circle or an ellipse.
Why some gradients go grey in the middle
The browser interpolates channel by channel in sRGB, and sRGB is not perceptually even. Halfway between blue and yellow, the arithmetic mean of the channels is a desaturated grey, even though nobody would describe grey as being between blue and yellow.
The reliable fix is to add a stop in the middle, in the colour you actually want to pass through. Newer CSS can interpolate in oklab instead, which avoids the problem, but adding a stop works everywhere today.
Gradients and readability
Text on a gradient has a different contrast ratio at every point. Check the text colour against both the lightest and the darkest stop before shipping it. If either fails, the text fails somewhere on the box. The contrast checker takes each stop in turn.
Frequently asked questions
What does the angle mean?
In CSS, 0deg points up and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. This is different from the mathematical convention, and it is a common source of upside-down gradients.
Why does my gradient look muddy in the middle?
Because browsers interpolate in sRGB by default, and sRGB is not perceptually even. Blue to yellow passes through a dull grey rather than green. Adding a mid stop in the colour you actually want fixes it, which is what the extra stop control is for.
What is the difference between linear and radial?
A linear gradient changes along a straight line across the whole box. A radial gradient changes outward from a point, so the first stop is a centre rather than an edge. Radial suits spotlights and soft backgrounds; linear suits everything else.
Can I use a gradient as text colour?
Yes, with background-clip: text and a transparent text colour. Do it sparingly and check the result against your background, because clipped gradient text often fails contrast requirements at its lightest point.
Read the guide
- sRGB, Display P3 and OKLCHWhy the same hex looks different on two screens, what a wide gamut buys you, and when the newer CSS colour spaces are worth the trouble.
- How to use color codes in CSSEvery way CSS accepts a colour, why custom properties beat repeating hex codes, and the relative-colour syntax that replaces most of your Sass functions.