Gradient Background Image Generator

A gradient image is the simplest good-looking background: a wallpaper for a phone or desktop, a slide or video backdrop, or a placeholder for a social post. This generator draws linear, radial or conic gradients at common screen sizes — Full HD, QHD, 4K, phone wallpaper, square post, story — or any custom size up to 8192 px, using the same geometry as CSS gradients. Optional dithering adds faint noise so smooth blends do not show bands, and the result downloads as PNG, JPG or WebP.

How to use this tool

1. Pick a size preset, or Custom and type the width and height.
2. Choose linear, radial or conic and set the angle (or radial shape).
3. Type the color stops, one per line, with optional % positions.
4. Leave a little dither on for big screens, choose the format and download.

Formula

linear: gradient line through the center, length = |W × sin θ| + |H × cos θ| · radial (farthest-corner): ellipse radii = (W ÷ 2 × √2, H ÷ 2 × √2) · conic: canvas start angle = θ − 90°

θ follows CSS: 0° points up and angles turn clockwise, so 90° runs left to right. Stops without a position are spread evenly between their neighbors, and a position lower than an earlier one is raised to it, as in CSS. Dither adds up to ± half the chosen percentage of 255 per channel.

Example

At 90° from #FF0000 to #0000FF on a 200 × 100 image, the left column is pure red, the right column pure blue, and the middle pixel is about rgb(127, 0, 128) — the same as linear-gradient(90deg, #ff0000 0%, #0000ff 100%). Three stops white, black, white with no positions put black at exactly 50%.