CSS Gradient Generator
Build a gradient, copy the CSS.
Runs entirely in your browser — nothing you enter is uploaded, logged, or tracked.
Compose a linear or radial gradient with as many color stops as you like, set the angle, preview it live at full size, and copy ready-to-paste CSS.
120°
Frequently asked questions
Linear vs radial?
A linear gradient blends along a straight line at the angle you choose; a radial gradient blends outward from a center point. This tool builds both with the standard CSS syntax.
Can I add more than two colors?
Yes — add as many color stops as you want and position each one; the preview and the generated CSS update instantly.