CSS Gradient Generator
Drag stops and set the angle to see the gradient live, then copy CSS you can paste straight into a stylesheet. Linear, radial and conic are all supported.
How to Use
- Pick type and angle
Choose linear, radial or conic. Linear and conic are steered by the angle, radial by circle or ellipse; controls that do not apply are disabled automatically.
- Tune the stops
Each stop pairs a colour picker with a position percentage. Use 'Add stop' to append and × to remove, keeping at least two. Order does not matter — the code sorts by percentage.
- Copy the code
The text box below holds the final CSS. Click 'Copy code' and paste it into a rule block in your stylesheet.
FAQ
Why can the preview and the code never disagree?
The preview element's background is assigned from the very same string that gets copied, with no second assembly step, so drift is impossible.
Which way does 90deg point?
CSS gradient angles run clockwise starting from up: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. That is the opposite of the maths convention and easy to get wrong.
What happens when two stops share a position?
You get a hard edge there instead of a smooth blend. Set two stops to the same percentage to build striped backgrounds.
What are conic gradients good for?
Pie charts, colour wheels, radar sweeps and progress rings. Colour is laid out by angle around a centre point, unlike the linear model.