Gradient Generator

Make a gradient image

A gradient is a smooth blend between colours, and it's one of the most useful backgrounds you can have — for a website hero, a phone wallpaper, a slide, a banner, or a placeholder while you design. This generator lets you pick a linear or radial gradient, add as many colour stops as you like, set the angle, and choose the exact pixel size you need.

Everything renders live as you adjust it, so what you see in the preview is exactly what downloads. Export a lossless PNG, a smaller JPG, or a modern WebP — and because the image is built from your settings, there is nothing to upload and nothing to wait for.

How to create a gradient

1. Pick linear or radial. Linear blends across a straight line at the angle you choose; radial blends out from the centre.
2. Choose your colours. Set each colour stop and drag its position. Add a stop for a three- or four-colour blend, or hit Shuffle for a fresh pair.
3. Set the size and download. Type a width and height or pick a preset, choose PNG/JPG/WebP, then click Download.

Angle and stops

For a classic diagonal look, set a linear gradient to about 135°. Adding a third stop in the middle — a lighter or contrasting colour — gives the blend more depth than a plain two-colour fade.