CSS Gradient Generator
Build a linear or radial gradient with any number of colour stops, and copy the CSS.
Last updated
How to make a CSS gradient
- Choose linear or radial, and set the angle or shape.
- Pick the colours and positions of each stop; click Add stop for more, or start from a preset.
- Click Copy CSS and use it as a background.
About this tool
Linear gradients transition along a straight line at the angle you set (0° points up, and it increases clockwise, matching the CSS spec); radial gradients spread outward from the centre. Add as many colour stops as you like — each one's position (0–100%) is where that colour is fully reached, and the browser blends smoothly between neighbouring stops in the order you list them.
The generated CSS works as a background value on any element. Nothing you build here is sent to a server; the entire tool runs as JavaScript in your browser tab.
Questions about CSS gradients
How do I write a CSS gradient?
For example background: linear-gradient(135deg, #ff7e5f, #feb47b);. The angle sets the direction, followed by the colours in order.
Which way do gradient angles point?
0deg points up and angles turn clockwise, so 90deg goes left to right and 180deg top to bottom.
What is the difference between linear and radial?
A linear gradient changes along a straight line; a radial gradient spreads out from the centre in a circle or ellipse.
How do I make a hard line between colours?
Give two stops the same position, for example red 50% and blue 50%, for a sharp split with no blend.