How to Create CSS Gradients
1
Choose Gradient Type
Select from linear, radial, or conic gradients. Adjust angle and position for perfect control.
2
Add Color Stops
Click to add colors, drag to reposition. Use the color picker or paste HEX codes directly.
3
Export & Use
Copy CSS code, Tailwind classes, SCSS variables, or SVG. Save gradients for later reuse.
Gradient Generator Features
Live Preview
See your gradient in real-time as you adjust colors, positions, and angles.
Multiple Export Formats
Export as CSS, Tailwind CSS, SCSS, JSON, or SVG. One-click copy to clipboard.
Save & Share
Save unlimited gradients locally. Generate shareable URLs with full gradient data.
From Palette
Pick colors from your saved palettes. Create gradients from existing color schemes.
Gradient FAQ
What gradient types are supported?
Linear (directional), radial (circular), and conic (angle-based) gradients. All CSS gradient types are fully supported.
Can I export for Tailwind CSS?
Yes! Export as Tailwind utility classes with from/via/to color syntax. Perfect for modern web frameworks.
Are gradients saved in the cloud?
No. All gradients are saved locally in your browser. Your data never leaves your device.