DocomintCSS Gradient Generator
Build a linear or radial CSS gradient with multiple color stops and copy the ready-to-use CSS.
Color stops
CSS gradient syntax is unforgiving to write by hand — stop order, percentage positions, and the angle-vs-keyword direction syntax (`90deg` vs `to right`) are easy to get subtly wrong. This builds the string from a live visual preview instead: drag stops, watch the gradient update immediately, and copy exactly what you see rather than guessing at syntax.
Example: Two stops — indigo at 0% and pink at 100% — at a 90° angle produce `linear-gradient(90deg, #4f46e5 0%, #ec4899 100%)`, a left-to-right blend ready to paste into a `background` property.
How it works
- Add color stops and drag each one's position
- Choose linear or radial, and an angle for linear gradients
- Copy the generated background: CSS declaration
Frequently asked questions
What's the difference between a linear and radial gradient?
A linear gradient transitions along a straight line at a chosen angle (e.g. left to right); a radial gradient transitions outward in circles from a center point, like a spotlight or vignette effect.
How many color stops can a gradient have?
This tool supports 2 to 6 stops. CSS itself has no hard limit, but gradients with more than a handful of stops usually become hard to read and edit, both here and in the underlying CSS.
Is my color values uploaded anywhere?
No — CSS Gradient Generator runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.