CSS Gradient Generator

How to use this tool

1. 1Click Linear or Radial to choose the gradient type.
2. 2For linear gradients, drag the Angle slider (0-360°).
3. 3Add color stops with 'Add stop' — set each stop's color and position (%).
4. 4Click Copy to copy the CSS background property.

About CSS Gradient Generator

CSS gradients are powerful but the syntax is verbose and hard to write by hand. This generator provides a live preview and a ready-to-copy CSS background property. Choose Linear or Radial gradient type. For linear gradients, set the angle with a slider (0-360°). Add color stops with the 'Add stop' button — each stop has a color picker and a position field (0-100%). Remove stops with the X button (minimum 2 stops required). Stops are sorted by position before generating the CSS string. The live preview updates instantly as you change any setting. The output shows the full CSS property: background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); — ready to paste into your stylesheet. Click Copy to copy it. Designers building hero sections, developers creating button hover effects, and anyone who needs a CSS gradient without memorising the syntax are the primary users.

Frequently asked questions