CSS Gradient Generator
Design linear and radial gradients visually and copy production-ready CSS.
Loading tool…
How to use it
- Choose linear or radial, pick the angle (for linear gradients) and the color stops with their positions.
- Leave a position empty to let the browser distribute it automatically.
- Preview the gradient live while you edit, then copy the generated background-image declaration.
- Enable the Repeating option for striped patterns.
About this tool
Pick colors and stop positions, preview the gradient live at full size, and copy the generated CSS with standard syntax plus legacy -webkit prefixes when needed. Presets for common gradients and support for multiple color stops are included.
Your input never leaves the browser: this tool works entirely offline once the page has loaded.
Frequently asked questions
What does an empty position mean for a stop?
The browser distributes unspecified stops evenly between the positioned ones — handy for quick smooth gradients.
Do I need -webkit- prefixes?
Modern browsers support unprefixed gradients; the tool generates standard syntax only, which is correct for all evergreen browsers.