CSS Gradient Generator
Create beautiful CSS gradients with live preview. Add color stops, pick the angle or type, and copy production-ready CSS in one click.
Type
CSS
Frequently asked questions
How do I use a CSS gradient?
Copy the generated CSS and paste it into the background property of any element, for example background: linear-gradient(...). It works in every modern browser.
What's the difference between linear and radial gradients?
A linear gradient blends colors along a straight line at a chosen angle. A radial gradient blends outward from a center point in a circle or ellipse.
Can I use more than two colors?
Yes. Add as many color stops as you like and drag their positions. Each stop can have its own color and percentage.
Become a designer
Go from free tools to real skills with in-depth design courses.
Browse all courses