CSS Gradient Generator
Build linear, radial and conic CSS gradients with a live preview and copy the CSS in one click.
Color stops
Presets
CSS
background: #6366f1; background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
How it works
Pick a gradient type — linear, radial or conic — drag the angle slider, then add as many
colour stops as you need. Each stop has a colour picker, a hex field you can paste into and
a position in percent, so you can build anything from a simple two-colour fade to a
multi-stop background. The preview and the CSS update on every change, and the generated
rule includes a solid background fallback for browsers that cannot render the
gradient. Copy the CSS straight into your stylesheet or download it as a
.css file. Everything runs in your browser with plain JavaScript — nothing is
uploaded, there is no account and there are no ads.
Frequently asked questions
How do I create a CSS gradient?
Pick a gradient type, set the angle (or the centre position for radial and conic gradients), then choose your colours with the pickers or by pasting hex values. The preview and the CSS update instantly, so you can copy a rule like background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); straight into your stylesheet.
How do I add more than two colors to a CSS gradient?
Press "Add color stop" and the generator inserts a new stop halfway between the last two, pre-filled with the colour blended from its neighbours. Each stop has its own hex field and percentage position, and you can use up to eight stops in one gradient.
What is the difference between linear, radial and conic gradients?
A linear gradient fades along a straight line at the angle you set. A radial gradient fades outward from a centre point as a circle or ellipse. A conic gradient sweeps the colours around a centre point like a pie chart, which is what makes colour wheels and progress rings possible in pure CSS.