Keep at least 2 color stops.
Help
About this tool
Design a CSS gradient visually and grab the generated code in one click. Switch between linear, radial and conic gradients, set the angle, shape, size keywords and center position, and add or remove color stops with precise percentage positions. The live preview updates as you type, and the output is a standard background-image declaration you can paste straight into your stylesheet. A randomize button produces pleasant, non-muddy gradients by picking hues within a limited range. Everything runs locally in your browser — nothing is uploaded.
How to use
- Pick a gradient type: linear, radial or conic.
- Adjust the parameters — angle, shape, size keyword and center position — and move the slider or type a value.
- Add or remove color stops and drag their positions between 0% and 100%.
- Click Random for inspiration, then copy the generated background-image CSS into your stylesheet.
What is the difference between linear, radial and conic gradients?
A linear gradient blends colors along a straight line at a given angle. A radial gradient radiates outward from a center point, using a shape (circle or ellipse) and a size keyword. A conic gradient sweeps colors around a center point, starting from a given angle — handy for color wheels and pie-chart effects.
How do the color stop percentages work?
Each stop's percentage is its position along the gradient, from 0% (start) to 100% (end). The browser interpolates between neighboring stops, so two stops at 50% and 80% blend across that 30% span. Stops can be out of order, which produces a hard color break.
How do I use the generated CSS?
Paste the copied declaration into a CSS rule, for example `.hero { background-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); }`. Only the background-image property is generated, so you can keep any existing background-color as a fallback.
Is my gradient uploaded to a server?
No. The preview and code generation run entirely in your browser — nothing is sent anywhere.