Image Gradient Generator
Make smooth gradient images for wallpapers, backgrounds and design projects. Choose linear, radial, conic or a four-corner mesh gradient, pick up to four colours, set the angle or centre and choose a size – from phone wallpapers to 4K screens. Dithering removes the visible stripes that often spoil large gradients, and linear and radial gradients can be saved as resolution-independent SVG.
- Runs in your browser
- No sign-up
- Free to use
Linear and radial gradients can be downloaded as SVG. Conic and mesh gradients are raster images; choose PNG for the smoothest result.
How to use Image Gradient Generator
- Choose a gradient type or a preset.
- Pick the colours and how many to use.
- Set the angle or centre and the image size.
- Download as PNG, JPG, WebP or SVG.
Image Gradient Generator features
Four types
Linear, radial, conic and mesh.
Up to four colours
Evenly spaced colour stops.
Dithering
Prevents banding in smooth areas.
Screen sizes
HD, 4K, phone, square and story presets.
SVG export
Vector gradients for linear and radial.
Private
Created in your browser; nothing is uploaded.
When to use Image Gradient Generator
- Desktop and phone wallpapers.
- Backgrounds for slides, thumbnails and social posts.
- Placeholder images for websites and apps.
- Colour studies and brand explorations.
Image Gradient Generator FAQ
What is banding?
Visible steps in a gradient, caused by the limited 256 levels per colour channel. Over a wide area, neighbouring levels form bands. Dithering adds a tiny amount of noise that hides them.
What is a mesh gradient?
A blend between four colours placed in the corners, which creates soft, multi-directional colour transitions popular in modern UI design.
Why can conic gradients not be saved as SVG?
SVG has no conic gradient type. Save them as PNG instead.
How is this different from the CSS Gradient Generator?
The CSS tool writes code for web pages. This tool produces image files you can use anywhere, at any size.
Is anything uploaded?
No. Everything is generated and processed in your browser.
Making smooth gradients
A gradient is a gradual transition between colours. Linear gradients run along a line at any angle, radial gradients spread outwards from a centre, conic gradients sweep around a centre like the hands of a clock, and mesh gradients blend colours from several points. Each creates a different mood: linear feels directional, radial focuses attention, conic suggests movement and mesh feels organic.
The generator computes linear gradients like CSS does: the gradient line passes through the centre at the chosen angle and is just long enough for its ends to touch the corners, so the colours always fill the whole image. Radial gradients reach the farthest corner from the centre you choose.
Large, smooth gradients expose a limit of 8-bit images: only 256 values per channel. Across a 4K screen, neighbouring values become visible bands. Dithering adds a random variation of at most one level per pixel. It is invisible as noise but breaks up the band edges, making the gradient look perfectly smooth – the same technique professional software uses.
For the web, SVG gradients are tiny and scale to any size, while PNG gives the most faithful rendering everywhere. JPG is smallest for photos but can show slight blocking in very smooth gradients at low quality.
All gradients are drawn in your browser.