CSS Gradient Generator
Choose linear, radial or conic, add and drag colour stops, set the angle, and copy the background CSS. The preview fills live. It runs in your browser.
This css gradient generator covers linear, radial and conic backgrounds from one set of controls. Add as many colour stops as you need, drag each one to reposition it, and set the angle for linear and conic types. As a linear gradient maker it is quick for buttons and hero panels, and the same stops carry over when you switch to radial or conic. The preview panel paints the background gradient css in real time, and the output is a ready background declaration. Treat it as a general gradient color tool: pick colours, place them, copy.
background: linear-gradient(135deg, #6d28d9 0%, #0ea5e9 55%, #f59e0b 100%);
How it works
- 1
Pick the gradient type
Switch between linear, radial and conic. Linear and conic add an angle control; radial spreads from the centre.
- 2
Place your colour stops
Add stops, choose each colour, and drag the position slider to move it along the gradient. Remove any stop you don’t need.
- 3
Copy the background
The background declaration updates as you work. Copy it and paste it onto your element.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- What is the difference between linear, radial and conic?
- A linear gradient blends along a straight line at an angle, a radial gradient spreads outward from a centre point, and a conic gradient sweeps around a centre like a colour wheel. This gradient color tool previews all three from the same stops.
- How do I add a third or fourth colour?
- Use “Add stop” to insert another colour, then drag its position slider to place it. The linear gradient maker re-sorts stops by position so the copied value is always valid.
- How do I control where a colour sits?
- Each stop has a percentage position from 0 to 100. Two stops close together make a hard edge; spread them out for a soft blend. The background gradient css updates as you drag.
- What angle should I use for a linear gradient?
- 0deg points the gradient upward, 90deg points right, and 135deg gives the common top-left to bottom-right diagonal. Drag the angle slider and watch the preview to find the look you want.
- Can I use this for a background overlay?
- Yes. Copy the background value and layer it over an image, or use semi-transparent stops. Everything is computed locally, nothing is uploaded.
More tools
More from the Hivly network
Free sister tools on our other sites.
