Make gradient

Make a background from colors — linear, radial, conic or mesh — at the size you need. Nothing to upload — it is drawn here in the tab.

How it works
  1. Press Start. Nothing goes in — what you make is drawn from the settings alone.
  2. Set it in the settings column and watch the preview change as you go.
  3. “Make gradient” draws it full size on your device and hands it to you as a download.

About Gradient maker

Gradient maker draws a background from colors you choose — linear, radial, conic or mesh — at the size of a desktop, a phone, a post or any width and height you type, and saves it as a picture. Nothing goes in.

Start from one of the ready-made sets or pick every color yourself, two to six of them, with the picker or as hex. The preview is the gradient itself drawn smaller, and every measure in it is a share of the picture, so the file looks like what you see.

Linear runs the colors in a straight line at the angle you set, 0° from the bottom up and 90° from left to right, as CSS counts them. Radial spreads them out in rings from a center, which can be a corner. Conic sweeps them round a center like the hands of a clock, and comes back round to the first color so there is no seam. Mesh lays each color down as a soft glow in its own part of the picture, over the first; Variation moves them, and the same number always gives the same picture.

Bands gives every color an even share with a hard edge between them, for a striped or posterized look. Grain lays a fine noise over the whole picture — a texture of its own, and the usual way to hide the faint steps a smooth gradient shows on a screen that has only 256 shades of each color.

Frequently asked questions about Gradient maker