CSS Gradient Generator
Pick colors and angles to generate copy-paste CSS gradient code.
Build CSS linear and radial gradients.
How to use
- Choose gradient type: linear or radial.
- Add color stops and adjust positions.
- Set angle or direction for linear gradients.
- Copy the generated CSS background property.
About CSS Gradient Generator
Build CSS linear and radial gradients.
Runs in your browser — your files and input stay on your device.
Frequently asked questions
Is the preview live?
Yes. The preview updates as you change colors and stops.
Is CSS standard-compliant?
Output uses standard CSS gradient syntax for modern browsers.
Is data stored?
No.