Gradient Generator

Create linear, radial and conic gradients, copy the CSS, or download the gradient as a PNG image.

Runs in your browser. Files are not uploaded.

How to use

  1. Choose a type and angle.
  2. Pick the colours and where each one sits.
  3. Copy the CSS or download an image.

Questions

How many colours can I use?

Two to six.

Does the CSS work in every browser?

Linear, radial and conic gradients work in all current browsers.

What size is the image?

Choose any size up to 4096 × 4096 pixels.

More design tools