CSS Gradient Generator
Build beautiful CSS gradients with a live preview — pick colors, angle and type, then copy the ready-to-use CSS — free, fast and private.
Pick colors to see your gradient CSS.
How to use CSS Gradient Generator
- Pick a gradient type: linear or radial.
- Choose two or three colors and the angle (for linear).
- Watch the live preview update as you change settings.
- Click Copy CSS to use the gradient in your stylesheet.
Note: this tool runs in your browser. Nothing is uploaded.
Frequently Asked Questions
What is the difference between linear and radial gradients?
Linear blends colors along a straight line at an angle; radial blends them outward from a centre point in a circle or ellipse.
How many colors can I use?
This tool supports two or three color stops. For more stops, edit the generated CSS and add extra stops.
Can I use the CSS in any project?
Yes — the output is standard CSS that works in all modern browsers.
Is my data uploaded anywhere?
No. The gradient is generated in your browser.