Gradient Generator
Create beautiful CSS gradients with a visual editor. Build linear, radial, and conic gradients with multiple color stops and export to CSS or Tailwind.
Color Stops
%
%
Export Gradient
background: linear-gradient(90deg, #6366F1 0%, #22C55E 100%);How to Use
- Choose a gradient type: linear, radial, or conic
- Adjust the angle for linear/conic gradients
- Click color swatches to change colors
- Adjust position percentages to control color transitions
- Add or remove color stops as needed
- Copy the CSS or Tailwind code
Frequently Asked Questions
What types of gradients can I create? ▼
You can create linear (straight lines), radial (circular), and conic (angular) gradients. Each type has different use cases for backgrounds and effects.
How do I add more colors? ▼
Click "Add Color Stop" to add up to 5 colors. Each stop can have its own color and position (0-100%).
What does the angle control do? ▼
For linear gradients, angle controls the direction (90° = left to right). For conic gradients, it sets the starting angle. Radial gradients don't use angle.
Can I use these gradients in Tailwind? ▼
Yes! The Tailwind export gives you the appropriate classes. For linear gradients, it uses native Tailwind utility classes when possible.