Gradient Wallpaper & Background Image Generator
Create gradient images for phone or desktop wallpapers and slide backgrounds at the exact resolution you need. If you want CSS code instead, use the CSS Gradient Generator; for flat dummy images, try the Placeholder Image Generator.
🔒 Runs in your browser · Your data is never sent to a server
Angle is not used for radial gradients
How to use
- Choose a "Gradient type" and the "Number of colors", then adjust each color and position.
- Pick one of the "Resolution presets", or type the width and height yourself.
- Raise "Noise (grain)" if you like, and choose a format.
- Press "Download" to save the image at the resolution you set.
Notes
- Width and height must be 16 to 8192 px, and width × height is capped at about 16.7 million pixels (4K is about 8.3 million) to stay within browser canvas limits.
- The preview is scaled down. The image is redrawn at full resolution when you download it.
- If you see visible bands (banding), adding a little noise makes them much less noticeable.
- JPEG has no transparency and is often smaller than PNG for gradients, but it is slightly lossy.
Glossary
Banding
Visible stripes of color steps in what should be a smooth gradient. A tiny amount of noise hides them.
Conic gradient
A gradient where colors sweep around a center point by angle, like CSS conic-gradient. Good for color-wheel style looks.
FAQ
Is there a limit on the resolution?
Width and height must be 16 to 8192 px, and width × height is capped at about 16.7 million pixels. 4K (3840×2160) works fine. Beyond that, browsers may fail to create the canvas, so the limit is enforced up front.
Why do I see stripes (banding) in my gradient?
With 8-bit color, small changes between nearby colors can show up as steps. Adding "Noise (grain)" at around 5 to 20 breaks the steps up so they are far less visible.
Should I save as PNG or JPEG?
Use PNG for lossless output and JPEG for a smaller file. Noise makes PNG files larger, so JPEG is worth considering in that case.
How is this different from the CSS Gradient Generator?
The CSS Gradient Generator outputs CSS code. This tool outputs an actual image file at the resolution you choose, ready to use as a wallpaper or background.
Share this page