Free CSS Gradient Generator
Build beautiful linear and radial CSS gradients visually — pick colors, set the angle, and copy production-ready CSS.
135°
CSS output
–
How to use
- Choose linear or radial, then pick your colors (add a third optionally).
- Set the angle for linear gradients or tap a preset.
- Copy the CSS and paste it into your stylesheet.
Frequently asked questions
What is a CSS gradient?
A smooth blend between two or more colors rendered by the browser — no image files needed.
Linear vs radial — what's the difference?
Linear blends along a line at an angle; radial spreads outward from a center point.
Do gradients work in all browsers?
Yes — linear and radial gradients are supported in every modern browser.
Is the generator free?
Yes — free, no signup.