CSS Gradient Generator

Create stunning CSS gradients — linear, radial or conic — with custom color stops. Live preview and one-click copy.

Color Stops
Generated CSS
background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #facc15 100%);

What is CSS Gradient Generator?

The CSS Gradient Generator lets you build linear, radial and conic gradients with unlimited color stops. Choose gradient type, adjust angle, add or remove stops, and watch the preview update in real time. Copy the CSS background property or download it as a .css file.

How to Use This Tool

  1. Choose a gradient type: linear, radial or conic.
  2. Adjust the angle slider (for linear and conic).
  3. Set each color stop's color and position.
  4. Add more stops with the + button or remove them.
  5. Copy or download the generated CSS.

Frequently Asked Questions