CSS Gradient Generator
Build a linear or radial gradient with any number of color stops, and copy the CSS.
Last updated
—
Copied
About this tool
Linear gradients transition along a straight line at the angle you set (0° points up, and it increases clockwise, matching the CSS spec); radial gradients spread outward from the center. Add as many color stops as you like — each one's position (0–100%) is where that color is fully reached, and the browser blends smoothly between neighboring stops in the order you list them.
The generated CSS works as a background value on any element. Nothing you build here is sent to a server; the entire tool runs as JavaScript in your browser tab.