CSS Gradient Generator
CSS & PNG gradients

Set colors and angle, then copy the CSS or download an image.

More color tools

About the Gradient Generator

Set colors and angle, then copy the CSS or download an image.

Everything runs in your browser; images you choose are never uploaded. Contrast ratios use the WCAG 2.1 relative luminance formula.

How to use the Gradient Generator

  1. Pick a colorUse the picker, type a code or grab it from an image.
  2. AdjustSet the harmony, angle or number of colors.
  3. CopyCopy the code or download a PNG.

Frequently asked questions

Is the Gradient Generator free?

Yes, completely free with no sign-up.

Which color formats are supported?

HEX, RGB, HSL, HSV and CMYK; CSS color names (e.g. tomato) work too.

Are my images uploaded?

No. Images are processed only in your browser.