CSS Gradient Generator

Create beautiful CSS gradients with our interactive generator. Choose colors, directions, and get instant CSS code for your web projects.

Linear Gradients Radial Gradients Live Preview CSS Code

Linear Gradient Radial Gradient

Start Color

End Color

Custom Angle

0° 90° 360°

background: linear-gradient(to right, #3b82f6, #8b5cf6);

1. Choose your gradient type (Linear or Radial)

2. Pick your start and end colors using the color pickers

3. Select a direction or adjust the angle for custom positioning

4. Copy the generated CSS code and use it in your stylesheets

5. Try the preset gradients for inspiration