CSS Gradient Generator
Design a linear or radial gradient, add as many color stops as you like, and copy the CSS instantly. The live preview updates as you tweak colors, positions and angle.
How to use
Pick linear or radial, set the angle (for linear), and choose colors with their positions. Add more color stops for multi-color gradients; the preview updates live.
When it looks right, copy the generated background line straight into your stylesheet. It's standard CSS that works in every modern browser.
FAQ
What CSS does it produce?
A standard background: linear-gradient(...) or radial-gradient(...) declaration you can paste directly into your CSS.
Can I use more than two colors?
Yes — add as many color stops as you want, each with its own position, for smooth multi-color gradients.
Do gradients work in all browsers?
Linear and radial gradients are supported in every modern browser without prefixes.
Can I set the direction?
Yes — for linear gradients use the angle slider (0–360°); radial gradients emanate from the center.