Runs in your browser
Gradient Generator
Build a linear, radial, or conic CSS gradient with any number of color stops, and copy valid, ready-to-use CSS. Stops can be repositioned, added, removed, and edited with a live preview at every step.
Color stops
ReadyColor ToolsFree · No account required
Related tools
Features
- Linear, radial, and conic gradients, with a live preview
- Add, remove, and reposition up to 8 color stops
- Randomize for inspiration, or reset to start over
- Copy ready-to-use, always-valid CSS
How to use
- Choose a gradient type.
- Adjust the angle, shape, or position as needed.
- Edit, add, or remove color stops — the preview updates live.
- Copy the generated CSS.
FAQ
- What's the difference between linear, radial, and conic gradients?
- A linear gradient transitions along a straight line at an angle you choose. A radial gradient radiates outward from a point, as a circle or ellipse. A conic gradient sweeps around a point like a color wheel, starting from an angle you choose. All three are real CSS gradient functions, not simulations.
- Is the generated CSS guaranteed to be valid?
- Yes — the CSS is built from your color stops programmatically, always sorted by position and formatted correctly, so there's no way to produce a malformed gradient() call through the editor.
- Does this send my gradient anywhere?
- No — the preview and CSS are both generated entirely in your browser.