CSS Gradient Generator
Build a linear CSS gradient visually — set the angle and add as many color stops as you need — then copy the generated CSS.
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Everything you enter is processed in your browser and isn't sent to our servers.
How to use css gradient generator
- 1Adjust the angle slider.
- 2Set each color stop's color and position, or add more stops.
- 3Preview the gradient live, then copy the CSS.
About this tool
This generates a standard CSS linear-gradient() with the angle and color stops you set, in the exact syntax browsers expect — no vendor prefixes needed for any modern browser. Each stop has a color and a position (0-100%) along the gradient line.
The live preview updates instantly as you adjust anything, so you can fine-tune the angle and stop positions visually before copying the final CSS into your stylesheet.
Frequently asked questions
This tool generates linear gradients specifically. The CSS syntax is similar for radial-gradient(), but the angle and stop positions work differently, so it's kept as a separate, focused tool rather than one confusing combined interface.