Gradient Generator
Visually create beautiful CSS gradients with multiple types and preset templates, drag-edit color stops, and one-click code copy.
Gradient Type
Angle
135°
Color Stops
%
%
Preview
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Preset Templates
Purple Blue Fantasy
Sunset Afterglow
Blue Sea Sky
Aurora Night
Flame Red Lips
Peach Pink Orange
Lavender Field
Deep Sea Blue
Emerald Oasis
Galaxy Stars
Rainbow Bridge
Dawn Glimmer
Golden Age
Silver Moonlight
Copper Texture
Deep Forest
Desert Storm
Neon Purple
Neon Blue
Neon Green
Soft Pink Cloud
Soft Blue Dream
Soft Green Breeze
Radial Sunrise
Radial Starry Sky
Conic Color Wheel
Repeating Stripes
Usage
Features
- 4 gradient types: linear, radial, conic, repeating linear
- Drag-and-drop editing of color stop positions
- Circular angle picker for intuitive direction adjustment
- Double-click the gradient bar to quickly add a color stop
- Rich preset templates, one-click apply
- Outputs both CSS and Tailwind CSS code
Tips
- Drag the circular markers below the gradient bar to adjust color stop positions
- Click the color swatch to open the system color picker
- Radial gradients support center position adjustment (9-grid quick selection)
- Conic gradients are great for color wheels, pie charts, and similar effects
- Repeating gradients can create stripes, grids, and other patterns
- Click "Random Gradient" for inspiration