FREE TOOL
CSS gradient generator
Build a gradient with as many colors as you want, then copy the CSS.
Color stops
Presets
WHAT IT DOES
About this tool
Design linear, radial and conic CSS gradients visually. Add as many color stops as you need, set the angle and copy clean, ready-to-use CSS code.
Everything runs right in your browser: your text and files are never uploaded or stored.
QUESTIONS
Frequently asked questions
How do linear, radial and conic gradients differ?
A linear gradient blends colors along a straight line at your chosen angle. A radial one spreads them out from a center point, like a spotlight. A conic one wraps them around a center, like a pie chart or a color wheel.
Do CSS gradients work in every browser?
Linear and radial gradients work in every modern browser with no vendor prefixes. Conic gradients are supported in all current versions of Chrome, Edge, Firefox and Safari.
Why does my gradient look striped?
On large areas, two similar colors can show visible steps on some screens. Add a color stop in the middle or lay a very faint noise image over the top.
06 / LET'S GET ACQUAINTED
TELL US
WHAT YOUR
BUSINESS NEEDS
Describe the task. Together we'll
work out the next step.