CSS Gradient Generator
Build a linear, radial or conic CSS gradient with live preview, a flat colour fallback, and the stop control that decides where the blend happens.
Enable JavaScript to change the gradient; the CSS below is for the defaults.
Linear blends along a line, radial outwards from a point, conic around one.
0 points up, 90 points right. Used by linear and conic gradients.
Where a radial or conic gradient starts from.
An ellipse stretches with the element; a circle stays round.
Everything before this position is the flat first colour.
.your-element {
background-color: #1e56ec;
background-image: linear-gradient(135deg, #1E56EC 0%, #0B1020 100%);
}Build a linear, radial or conic gradient, watch it fill a real element, and copy it with a flat colour fallback in front.
How to use
- Pick the type. Linear blends along a line, radial spreads outwards from a point, conic sweeps around one.
- Set the angle for linear: 0 points up, 90 points right, 135 gives the diagonal most interface gradients use.
- Move the stops rather than adding colours. A blend that looks muddy usually needs its two stops pulled apart, not a third colour.
- Add a middle colour when the blend passes through a hue you do not want. Blue to orange goes through grey; a middle stop steers it.
- Keep the flat colour fallback in the output. It is what shows if the gradient fails to parse, and it is what the text has to be readable against.
Example
.your-element {
background-color: #1e56ec;
background-image: linear-gradient(135deg, #1E56EC 0%, #7A5AF8 50%, #0B1020 100%);
}The first stop at 0% and the last at 100% means the blend uses the whole element. Pull them in to 20% and 80% and you get flat colour at each end with the blend in the middle.
Pitfalls
- Two colours far apart in hue blend through grey. Blue to yellow passes through a dull green; a middle stop is how you avoid it.
- Gradients are
background-image, notbackground-color. Anything relying onbackground-coloralone, including some email clients, sees nothing without the fallback. - Text on a gradient has a different contrast ratio at each end. Check the worst point, not the middle.
repeating-linear-gradientneeds its last stop well below 100 percent, or there is nothing left to repeat and it looks identical to the plain version.- An ellipse radial gradient stretches with the element, so the same CSS looks different in a wide box and a tall one.
circlestays round. - Banding shows on large, subtle gradients, particularly in dark colours on 8 bit displays. A little noise or a third stop hides it.
- Animating a gradient means repainting the whole element each frame. Animate a transform on a gradient-filled overlay instead.
- Conic gradients need Chrome 69, Firefox 83 or Safari 12.1. Everything older shows the fallback colour.
Compatibility
linear-gradient and radial-gradient are supported by every browser in use, unprefixed since 2013. conic-gradient needs Chrome 69, Firefox 83 or Safari 12.1. The repeating- variants have the same support as their base. Stops in percentages work everywhere; the newer interpolation hints and colour space syntax do not, and are not used here. The tool runs entirely in your browser.
Frequently asked questions
Why does my gradient look muddy?
Why is there a background-color too?
How do I make stripes?
Can I use a gradient on text?
background-clip: text and a transparent text colour. Keep a solid colour fallback, because unsupported browsers show nothing.