Gradient Generator

Interactive Gradient Generator

Color 1: 0%

Color 2: 100%

Color 3: 50%

Gradient Type: Linear Radial

Direction: To Right To Left To Bottom To Top To Bottom Right To Top Left

CSS Code:

How to Use This Gradient Generator:

1. Select colors using the color pickers
2. Adjust color stops using the sliders
3. Choose gradient type (linear or radial)
4. For linear gradients, select a direction
5. Add or remove color stops as needed
6. Copy the generated CSS code
7. Use the code in your website's stylesheet