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.
New to design? Start with a free course
Beginner-friendly courses in Blender, Photoshop, Figma, Canva and Claude - free.
Become a designer
Go from free tools to real skills with in-depth design courses.
Browse all courses