CSS Gradient Generator
Build linear and radial CSS gradients with live preview, adjustable angle, colors and stops. Copy the CSS instantly.
Pure browser JavaScript — generates CSS gradients locally.
How to use this tool
- Choose linear or radial.
- Pick two colors and adjust their stop positions (and angle for linear).
- Copy the generated CSS background rule.
Build linear and radial CSS gradients with live preview, adjustable angle, colors and stops. Copy the CSS instantly.
Frequently asked questions
- Can I use this in any project?
- Yes — the output is a standard CSS background property that works in every modern browser.