Generate a Gradient PNG

linear at any angle · radial · conic · two or three stops · any size

Make a gradient image at exactly the dimensions you need — a hero background, a placeholder, a card header, a texture to blend over a photo. No file to upload; just set the colours and download.

The three types

Linear runs in a straight line at the angle you set — 0° is left to right, 90° is top to bottom, 45° is the diagonal everyone reaches for. The gradient axis is projected onto the canvas so the full colour range is always used regardless of angle and aspect ratio.

Radial starts at the centre and spreads outward in a circle, which is how you make a spotlight or a soft glow behind a subject. Conic sweeps around the centre like a colour wheel, and is the basis of the "aurora" backgrounds that have been fashionable for a while. Conic requires a browser with createConicGradient; where it's missing you'll get a linear gradient instead rather than an error.

Why generate a file rather than use CSS

On the web, a CSS gradient is almost always the better answer — it's a few bytes, it's resolution independent, and it re-renders at any size. Generate an actual image when CSS isn't available: an Open Graph card, an email background, a slide deck, a video editor, an app asset, a print layout, or a base layer you're about to composite something onto with Overlay images.

Two practical notes. Large smooth gradients are one of the few cases where PNG is the wrong choice — subtle tonal variation across thousands of pixels is expensive in a lossless format, and a WebP or JPG version can be twenty times smaller with no visible difference. Second, wide gradients often band on 8-bit displays; a small amount of noise is the standard professional fix and breaks the bands up convincingly.

FAQ