Home/Gradient Generator

Gradient Generator

Create beautiful CSS gradients with multiple color stops and directions

Gradient Type

Direction

Custom Angle: 180°

Color Stops

Position: 0%

Position: 100%

Actions

Preview

CSS Code

background: linear-gradient(to bottom, #3B82F6 0%, #8B5CF6 100%);

Tips

Add multiple color stops to create complex gradients
Drag the position sliders to adjust where colors appear
Use radial gradients for circular effects
Experiment with different angles for linear gradients
Copy the CSS and paste directly into your stylesheets