Linear, Radial & Conic Gradients
Generate all three CSS gradient types in one tool. Switch between Linear, Radial, and Conic instantly — each with dedicated controls for angle, shape, and position.
Gradient Generator
Linear · Radial · Conic · Smart Harmony · Undo/Redo
Design Studio
Rotation: 135°
Shape
Active Stop
Quick Presets (40)
Position %
Smart Color Harmony
Real color theory — not random. Recommendations use HSL-space algorithms: Complementary, Analogous, Triadic, Split-Complementary, Tetradic, and Monochromatic schemes based on your base color.
Undo / Redo History
Never lose your work. Full undo/redo stack (50 steps) so you can experiment freely. Use Ctrl+Z / Ctrl+Y keyboard shortcuts for fast iteration.
Export All Formats
One click to export CSS background, Tailwind classes, SVG, and React inline style — all generated accurately from your gradient configuration.
Frequently Asked Questions
What's the difference between Linear, Radial, and Conic?
Linear gradient flows in a straight line at a given angle. Radial radiates from a center point outward. Conic rotates colors around a center point like a color wheel.
How do the Smart Harmony recommendations work?
The tool converts your base color to HSL space, then calculates mathematically correct color relationships — complementary (180° opposite), analogous (±30°), triadic (±120°), etc. This guarantees perceptually harmonious results, not random brightness shifts.
Can I add more than 2 color stops?
Yes. Click anywhere on the gradient track to add a new stop. Drag to reposition, edit hex/position directly, or delete stops — minimum 2 stops required.
Is the Tailwind output accurate?
Yes — the Tailwind output uses the correct direction class matching your actual angle (e.g. to-r for 90°, to-br for 135°) with arbitrary color values for each stop.