CSS Gradient Generator
Build linear, radial and conic CSS gradients with multiple color stops and copy the code.
background: —;
Everything runs in your browser — no upload, no sign-up.
About CSS Gradient Generator
The CSS Gradient Generator builds linear, radial and conic gradients with full visual control. Add color stops by clicking the gradient bar, drag them to reposition, and give each stop its own color, opacity and position. Linear gradients get an angle control; radial ones a shape (circle or ellipse) and position; conic ones a starting angle.
The live preview shows exactly what the browser will render, and a randomize button plus a set of curated presets are there when you need a starting point rather than a blank canvas. Stops can be added and removed freely — a gradient just needs at least two.
When it looks right, copy the bare gradient value or a complete CSS rule. The generator runs entirely in your browser with no upload and no sign-up, making it a quick companion for buttons, hero backgrounds, borders and text effects.
How to use CSS Gradient Generator
- Choose the gradient type: linear, radial or conic.
- Set the angle (linear), the shape and position (radial), or the starting angle (conic).
- Click the gradient bar to add color stops and drag them into position.
- Give each stop its color, opacity and exact position.
- Try the presets or the randomize button for quick inspiration.
- Copy the gradient value or the full CSS rule.