CSS Gradient Generator

Create beautiful CSS gradients with ease

%
%
background: linear-gradient(90deg, #4a90e2 0%, #2ecc71 100%);

Documentation

Features

  • Generate linear and radial gradients
  • Customize gradient angle
  • Add multiple color stops
  • Real-time preview
  • Copy CSS code with one click
  • Adjust color stop positions
  • Choose between circle and ellipse shapes for radial gradients

How to Use

  • Select gradient type (linear or radial)
  • For linear gradients, adjust the angle using the slider or input
  • For radial gradients, choose the shape (circle or ellipse)
  • Add color stops using the color picker and position inputs
  • Click "Add Color Stop" to add more colors to your gradient
  • Preview updates automatically as you make changes
  • Click "Copy" to copy the CSS code to your clipboard

Tips

  • Use at least two color stops for a basic gradient
  • Position values are in percentages (0-100)
  • Colors can be adjusted using the color picker or by entering hex values
  • The preview box shows exactly how your gradient will look