CSS Gradient Generator

A tool that lets you visually pick colors and create CSS gradient code (linear-gradient or radial-gradient) without writing CSS by hand.

Pick your colors using the color pickers, choose Linear or Radial type, adjust the angle (for linear), and click Copy CSS. You can also add up to 5 color stops.

Yes. Click Download PNG to get a 1920×1080 image of your gradient, perfect for thumbnails or backgrounds.

Yes, completely free with no signup, no watermarks, and no limits.

A linear gradient transitions colors along a straight line (at a chosen angle). A radial gradient transitions colors outward from a central point in a circle.