CSS Gradient Generator
Design a CSS gradient visually — linear, radial or conic, with up to eight colour stops — and copy ready-to-use CSS.
Result
Choose colours to build a CSS gradient.
How to use this tool
- Choose the gradient type and, for linear and conic gradients, the angle.
- Edit the colour stops; add up to eight. Leave a position empty to space colours evenly.
- The preview updates as you type. Copy the CSS and paste it into your stylesheet.
How it works
The tool writes standard CSS gradient functions: linear-gradient(angle, colour position, …), radial-gradient(shape at center, …) and conic-gradient(from angle at center, …). Positions must increase from first to last stop. A solid background-color equal to the first colour is included as a fallback.
Example
A simple linear gradient
Red at 0% and blue at 100% at 90° gives linear-gradient(90deg, #FF0000 0%, #0000FF 100%) — red on the left fading to blue on the right.
Privacy and limitations
- Everything happens in your browser.
- All current browsers support linear, radial and conic gradients without prefixes.
- Large gradients between very different colours can show banding on some screens; adding a middle stop can help.
Frequently asked questions
Which way does the angle go?
0deg points up (bottom to top) and angles increase clockwise, so 90deg runs left to right and 180deg top to bottom.
Can I use transparency?
Yes — enter colours such as rgb(15 118 110 / 0%) or #0F766E00 to fade to transparent.