Free tool
Gradient Background Maker for Wallpapers, Slides and Banners
Choose three colours, pick a style and a size, and download a finished picture. It suits slide backgrounds, link previews, video covers and phone wallpapers.
Settings
The picture is drawn in your browser and nothing is uploaded. The sizes, colours and style you chose last time are remembered on this device only.
When you need a picture and not a line of CSS
A gradient in CSS is right for a website section. A gradient picture is right when something else has to hold it: a slide deck, a video thumbnail, a social post, a phone lock screen or a design file. This tool draws the gradient and gives you a file at the size you ask for.
Download saves the file. Copy picture puts it on your clipboard so you can paste it into a design app or a chat. Shuffle colours picks a fresh set from the built-in palettes, which is a quick way to find a direction.
Sizes and file types
| Size choice | Pixels |
|---|---|
| Full HD, 16 to 9 | 1920 x 1080 |
| QHD, 16 to 9 | 2560 x 1440 |
| 4K, 16 to 9 | 3840 x 2160 |
| Vertical, 9 to 16 | 1080 x 1920 |
| Square | 1080 x 1080 |
| Link preview | 1200 x 630 |
| My own size | Any width and height from 16 to 7680 pixels |
For the file, choose PNG for exact colours or JPG for a smaller file. A smooth gradient with grain compresses less well, so a PNG can be large at 4K. If the picture will sit behind text on a web page, the JPG keeps it lighter. Our website speed guide explains why image weight matters for small sites.
Style, colours, angle and grain
- Mesh, soft glows places blurred patches of your three colours across the picture, which gives a soft, airy look. The Angle slider turns where the glows sit.
- Linear runs the colours along a line, and the Angle slider sets the direction.
- Radial spreads colour outward from a point, and the Angle slider moves that point around the middle of the picture.
- Grain adds fine noise on top, from none to strong. A touch of grain hides the faint bands that smooth gradients can show.
Colours 1, 2 and 3 are chosen with pickers, or taken from the swatches. The built-in palettes include dark sets such as Violet and Ocean, and light ones such as Peach and Sky.
Getting a result you can actually use
- Pick the size for the place the picture will go before you pick colours, since a vertical story and a wide slide need different compositions.
- Leave a calm area where text will sit, and avoid strong contrast changes under it.
- Use grain at a low setting first, then raise it only if you still see banding.
- Keep the same three colours across a set of pictures to make them feel related.
The tool makes backgrounds. It does not add text, logos or layout, so bring the file into your design app for that step.
Where this tool stops
The file is a flat picture, so it cannot change with the screen like CSS can. For a site background that must fit every screen, use the CSS gradient generator and keep the picture for places that need a file. Very large custom sizes need memory in your browser, so if a huge size fails, try a smaller one and enlarge it in your design app.
Colours shown on screen can look different on a printed copy, so if the picture is going to print, ask the printer for a proof.
Frequently asked questions
What size should a gradient background be?
Match the place it will go. Use 1920 x 1080 for a slide or desktop, 1080 x 1920 for a vertical story or phone wallpaper, and 1200 x 630 for a link preview.
Should I save as PNG or JPG?
PNG keeps exact colours but can be a larger file. JPG gives a smaller file, which suits web pages and quick sharing.
What is the grain slider for?
It adds fine noise over the gradient. A little grain breaks up the faint bands that smooth gradients can show, and gives a printed texture.
Can I set my own width and height?
Yes. Choose My own size and type a width and height anywhere from 16 to 7680 pixels.
What is the mesh style?
Mesh, soft glows places blurred patches of your three colours across the picture so the colours melt into each other without a clear direction.
Can I paste the picture straight into another app?
Yes. Copy picture puts the image on your clipboard, so you can paste it into a design app or a message.
More free tools
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- image resizer: Resize pictures by pixels or percent with fit, crop or stretch, presets and file type choices.
- image compressor: Compress pictures to a quality level or a target size in KB, with a before and after view.
- OG image size checker: Check a share image, preview the card, fit it to 1200 x 630 and write the tags.