Gradient Generator
Pick colours, a direction or angle, and any number of colour stops to build a linear, radial or conic gradient. Watch the preview update live, then copy the CSS declaration.
90°
0%
100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);How to use
- Choose a gradient type and add colour stops.
- Adjust the angle and stop positions.
- Copy the generated CSS.
Frequently asked questions
- What is the difference between linear, radial and conic?
- Linear moves along a straight angle, radial expands outward from a center point, and conic sweeps around a center point like a colour wheel.
- How many colour stops can I add?
- Up to ten stops, each with its own colour and position.
Privacy
Gradients are generated in your browser and are never sent to a server.