Gradient Generator
Blend two or more colours into a smooth linear or radial gradient, then download it at any size — free and right in your browser.
What to create
Colours
Size
Export
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
- Pick linear or radial. Linear blends across a straight line at the angle you choose; radial blends out from the centre.
- 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.
- 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.
What the gradient generator makes
It fills the whole canvas with a smooth colour blend — a linear gradient runs along a straight line at the angle you set, while a radial gradient blends outward in circles from the centre of the image.
Gradient controls
- Gradient type
- Linear or radial
- Angle (linear)
- 0–360°, defaults to 135° (a diagonal)
- Colour stops
- 2 to 6 stops, each a hex colour at a position from 0% to 100%
- Radial behaviour
- Blends from the canvas centre out to the corners (no angle needed)
- Image size
- Any width × height, 8–8000 px per side
- Export format
- PNG (lossless), JPG (smaller), or WebP
What to use it for
- A website or app hero background that loads instantly because it is a flat image, not a CSS gradient that has to be styled per breakpoint.
- A phone or desktop wallpaper — set a tall size like 1080×1920 or a wide 1920×1080 and the blend scales to fill the screen.
- A slide, banner, or thumbnail background that needs a clean colour transition behind text.
- A placeholder fill while you design, so empty sections show colour instead of white.
Tip
A third stop placed near the middle (a lighter or contrasting colour) adds far more depth than a plain two-colour fade. For the classic top-left to bottom-right look, keep a linear gradient near 135°; switch to radial when you want a soft spotlight glow centred in the frame.
More things to generate
Frequently asked questions
Can I add more than two colours?
Yes. Add up to six colour stops and drag each one's position to control exactly where the colours meet.
What's the difference between linear and radial?
A linear gradient blends along a straight line at a set angle; a radial gradient blends outward in circles from the centre. Pick whichever suits your design.
Can I download a large gradient for a wallpaper?
Yes. Set any size up to 8000 px per side, or choose a wallpaper preset such as 1920×1080 or 3840×2160.
Where is my image processed?
The image is generated in your browser, so the file is created on your own device. How any data associated with the tool is handled is described in our privacy policy.
More image tools
Crop an image
Crop to any ratio or an exact pixel size.
Image toolResize an image
Change dimensions to exact pixels or presets.
Image toolCompress an image
Shrink file size without visible quality loss.
Image toolRotate an image
Rotate 90°, flip, or straighten a tilted photo.
Image toolConvert HEIC to JPG
Turn iPhone HEIC photos into universal JPG.
Image toolConvert image format
PNG, JPG and WebP — convert any to any.