CSS Gradient Generator
Design a background gradient visually and copy ready-to-use CSS. Drag the colour stops along the bar, click the bar to add a stop, change the angle or the centre, and make colours transparent. The code includes a solid fallback colour for old browsers.
How to use it
- Choose linear, radial or conic, or start from a preset or a random gradient.
- Click a stop to edit its colour, opacity and position; drag it, or click the bar to add another.
- Copy the CSS and paste it into the rule of the element.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads out from a centre in a circle or ellipse. A conic gradient turns around a centre, like the hands of a clock, which is useful for colour wheels and pie charts.
Do CSS gradients work in all browsers?
Yes. Linear, radial and conic gradients work in all current versions of Chrome, Edge, Firefox and Safari without prefixes. The first background line is a plain colour, used only by very old browsers.
How do I make stripes?
Put two stops of the same colour at the start and the end of each stripe, so the colour changes abruptly instead of blending, and turn on Repeat. The last preset is an example.
🏷️ Meta Tag Generator
🖼️ Open Graph Generator
🔗 UTM Builder
🔲 CSS Box Shadow Generator