🌈 CSS Gradient Generator
Pick two colours, choose linear, radial or conic, drag the angle, and copy the CSS. Eight presets get you started, and the random button is there for when you just want to see something new.
🔒 Runs 100% in your browser. Your data never leaves your device.
How to use
- Choose your two colours, or click a preset to start from one.
- Pick linear, radial or conic and drag the angle slider.
- Copy the CSS and paste it into your stylesheet.
FAQ
Do these gradients work everywhere?
linear-gradient and radial-gradient work in every modern browser. conic-gradient is supported in all current browsers but not in Internet Explorer.
Why does the angle do nothing on radial?
A radial gradient spreads out from a centre point, so it has no angle. The control is hidden for that type.
Can I add more than two colour stops?
Not yet. Copy the CSS and add extra stops by hand — the syntax accepts any number of them.