Gradient Generator
Linear, radial and conic gradients with live CSS.
About Gradient Generator
Gradient Generator builds linear, radial and conic gradients with a live preview and copyable CSS. Conic is the least used and the most interesting — it sweeps around a centre point rather than across, which is how you make pie charts and colour wheels in pure CSS.
How to use it
- Pick your two colours, or choose a preset.
- Choose the type and, for linear and conic, the angle.
- Copy the CSS.
Questions
Why does my gradient look muddy in the middle?
Interpolating between complementary colours passes through grey. Pick colours closer together on the wheel, or add a midpoint stop in a brighter tone.
What angle should I use?
135deg (top-left to bottom-right) is the most common because it follows the natural reading direction. 180deg is a straight top-to-bottom fade.
Do gradients hurt performance?
No — they are drawn by the GPU and cost nothing compared to a background image. They also scale to any size without blurring.
Gradient Generator is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.