CSS gradient generator
Build a gradient visually and copy the CSS.
- Runs in your browser — your text is never sent anywhere
- No sign-up, no quotas, free to use as often as you like
How it works
Gradients are written in CSS as a single declaration whose syntax is easy to misremember, particularly the angle convention and where the colour stops go. Seeing the result while adjusting it is faster than reloading a page to check.
The angle convention catches people out
In CSS, 0 degrees points upwards and the angle increases clockwise, so 90 degrees runs left to right and 180 degrees runs top to bottom. This is different from the mathematical convention and from several design tools, which is why a gradient copied from elsewhere often comes out rotated.
The three types
Linear runs along a straight line and covers almost every real use. Radial spreads outward from a point, which suits glows and spotlights. Conic sweeps around a centre and is what pie charts and colour wheels are built from.
A gradient is an image, not a colour
This is the other thing that trips people up. CSS treats a gradient as a background image, so it works in background and background-image but not in color, border-color or anything else expecting a plain colour. Text gradients need background-clip, which is a separate technique.
Adding a middle colour
Two stops give a clean blend. A third lets you route the transition through another hue, which avoids the muddy grey that appears when two opposite colours blend directly.
CSS gradient generator — questions
Which way does the angle go?
0 degrees points up and angles increase clockwise, so 90 degrees is left to right.
Why does my gradient not work on text?
A gradient is a background image, not a colour. Text gradients need background-clip as a separate step.
When should I use radial or conic?
Radial for glows and spotlights, conic for pie-chart and colour-wheel effects. Linear covers most other cases.