How the angle works
CSS gradient angles are the direction the gradient points toward, measured clockwise from up. 0deg means the last colour ends at the top, 90deg at the right, 180deg at the bottom. That is 90° offset from the maths convention, which is the single most common source of confusion. You can also write keywords such as to bottom right, which adapt to the element's aspect ratio in a way a fixed angle does not.
The colour palette generator is worth a look for the next round.
Making gradients look good
Two colours far apart on the hue wheel will pass through a muddy midpoint, because sRGB interpolation cuts across the middle of the colour space. Gradients between neighbouring hues — or between two tints and shades of the same colour — stay clean. Keep saturation similar at both ends, and add a third stop if you need to steer the middle.
Plenty of people keep the colour picker open alongside this one.
Text over gradients
A ratio that passes at one end of the ramp can fail at the other, so test both stops in the contrast checker. On large backgrounds, banding can appear on 8-bit displays; a subtle noise overlay or a slightly shorter colour distance usually hides it.
The preview and the CSS are produced in your browser, so nothing you pick is uploaded. Remember that the WCAG thresholds still apply across the whole ramp: 4.5:1 for normal text at AA and 7:1 at AAA, measured against the worst stop rather than the average.
Frequently asked questions
- What CSS does this produce?
- A single background declaration, for example background: linear-gradient(90deg, #2942c6 0%, #ff5733 100%);
- Which way does 0deg point?
- Straight up. Angles increase clockwise, so 90deg runs left to right and 180deg top to bottom.
- Why does my gradient look grey in the middle?
- Colours from opposite sides of the wheel interpolate through a desaturated midpoint. Use closer hues or add a middle stop.
- Do I need vendor prefixes?
- No. Unprefixed linear-gradient has been supported by every current browser for years.
- Can I add transparency to a gradient stop?
- Yes, but you have to edit the copied code — this tool outputs opaque hex stops. Swap a stop for an rgba() value, such as rgba(41, 66, 198, 0), to fade a gradient out over an image instead of into a second colour.