Gradient Generator

How to use Gradient Generator

1. Pick two or three colours, keeping the hues reasonably close.
2. Adjust the angle and move the stops off even spacing.
3. Copy the CSS — and check contrast if any text will sit on it.
4. Complementary colours blend through grey in sRGB; add a chosen midpoint stop.
5. A gradient is a background-image in CSS, so it can be layered with commas.
6. Check text contrast at the darkest and lightest points, not the average.

Keep the hues close

The most reliable gradients move a short distance around the colour wheel — blue to indigo, orange to pink — while varying lightness and saturation. Distant hues have to travel through the middle of the colour space, which in sRGB passes near grey. If you want a bold two-colour blend, add a midpoint stop in a saturated colour you choose rather than letting the interpolation pick one.

Angle and stop placement do the work

Evenly spaced stops at a 45-degree angle is the default that makes gradients look generic. Moving the stops so one colour occupies most of the area, with the transition in the last third, reads as light falling across a surface rather than as a colour wash. A near-vertical angle suggests a horizon; a radial gradient suggests a light source. These are small changes with large effects.

Text on a gradient needs a contrast check

A gradient crosses a range of luminance values, so text that passes contrast at one end will fail at the other. Check the worst case rather than the average — and if a gradient must carry text, either keep both ends dark enough for white text or put the text on a solid panel over the gradient.