CSS Gradient Generator
Design a CSS gradient visually and copy the code, from simple two-colour fades to multi-stop blends.
Gradients without guessing values
A CSS gradient blends between colours, and writing one by hand means juggling colours, positions, angles and stops in your head. This lets you build one visually and copies the CSS, so you can see the blend as you adjust it rather than editing numbers and refreshing.
Pick your colours and direction, then copy the gradient CSS.
Linear, radial and smooth blends
The main gradient types cover most needs: linear fades in a straight line at an angle you choose, radial spreads out from a point, and conic sweeps around like a colour wheel. The mark of a good gradient is a smooth blend, which often means choosing colours that are close in hue or adding intermediate stops, since a jump between very different colours can produce a muddy band in the middle where they mix. Subtle gradients read as polished; harsh or over-saturated ones look dated. Building it visually is what lets you catch that muddy middle and adjust the stops until the transition is clean.
Questions & answers
What gradient types are there?
Linear fades in a straight line, radial spreads from a point, and conic sweeps around like a wheel — each suits different effects.
Why does my gradient look muddy in the middle?
A jump between very different colours mixes into a dull band. Choosing closer hues or adding intermediate stops keeps the blend clean.
Is anything uploaded?
No. The gradient is built in your browser.