Color & Design Tools / Gradient Generator
Gradient Generator
Create CSS gradients with a live preview and instant code.
Features
- Linear and radial gradients
- Live preview
- Instant CSS code
- Free, unlimited use
How to Use
Step 1
Choose two colors.
Step 2
Select a direction.
Step 3
Copy the generated CSS.
About This Tool
Gradient Generator lets you build linear or radial CSS gradients between two colors, with a live preview and ready-to-copy CSS code.
Frequently Asked Questions
Can I use more than 2 colors?
The current version supports two-color gradients.
Does this work in all browsers?
CSS gradients are supported in all modern browsers.