CSS Gradient Generator

Create beautiful CSS gradients with live preview and code export

Customize your gradient parameters

Gradient Type

Angle: 90°

Start Color

End Color

Live gradient preview and generated CSS

Live Preview

CSS Code

background: linear-gradient(90deg, #667eea, #764ba2);

1. Select gradient type (Linear or Radial)

2. For Linear: adjust angle | For Radial: choose shape (Circle/Ellipse) and position

3. Choose start and end colors using color pickers or hex input

4. Preview your gradient in real-time

5. Copy the generated CSS code and use in your project