How it works
- Add as many color stops as you like — gradients with 3+ colors create richer, more complex transitions than a simple two-color blend.
- Linear gradients transition along a straight line at the angle you set; radial gradients spread outward from the center; conic gradients sweep around a center point like a color wheel.
- "Repeating" tiles the gradient pattern continuously — useful for stripes and repeating patterns rather than a single smooth transition.
- Paste the output directly into any
backgroundorbackground-imageCSS property.
Build CSS gradients visually — linear, radial and conic — with multiple colour stops, angle control and a live preview. Copy clean CSS you can drop straight into your stylesheet.
Frequently asked questions
Which gradient types are supported?
Linear, radial and conic gradients, each with adjustable colour stops. You can set the angle for linear, the shape and position for radial, and the starting angle for conic.
How many colour stops can I add?
You can add several stops and drag them to reposition. More stops give smoother multi-colour blends or sharp colour bands if you place two stops at the same position.
Does the CSS need prefixes?
Modern browsers support gradients unprefixed, so the copied CSS works directly. Conic gradients need a reasonably recent browser but are widely supported now.
Can I create a hard-edged colour split?
Yes — place two colour stops at the same percentage and the gradient switches instantly instead of blending, which is great for stripes and pie-style backgrounds.