Gradient Generator
Create beautiful CSS gradients with two colors, direction and type, and copy the ready-to-use CSS code — free, fast and private.
How to use Gradient Generator
- Pick the start and end colors.
- Choose linear or radial gradient and a direction.
- Preview the gradient live in the box.
- Click Copy CSS to use it in your own design.
Note: this tool runs in your browser. Nothing is uploaded.
Frequently Asked Questions
Is the Gradient Generator free?
Yes, it is completely free with no sign-up.
What CSS does it produce?
It produces a standard linear-gradient or radial-gradient CSS declaration you can paste into any stylesheet.
Can I use the gradients commercially?
Yes. Gradients made here are just CSS color values, free for any project.
Does it work on mobile?
Yes, the color pickers and preview work on phones and tablets too.