About the Gradient Background Maker
Gradient backgrounds are everywhere: wallpapers, social media posts, slides, website headers and app screens. This maker lets you build one in seconds. Choose a linear or radial gradient, set the angle, pick two to five colours and slide them into place, or start from a ready-made palette. Pick a size, from phone wallpapers and Instagram squares to 4K desktop backgrounds, or type your own, and download a full-size PNG or JPG. It also gives you the matching CSS so the same gradient can be used on a website.
Updated October 2026
How to use the Gradient Background Maker
- 1Start from a ready-made gradient, or pick your own colours.
- 2Choose linear or radial and set the angle.
- 3Add up to five colours and drag their positions.
- 4Choose the image size.
- 5Download the PNG or JPG, or copy the CSS.
Picking colours that work together
Gradients look best between neighbouring colours on the colour wheel, such as orange to pink or blue to teal. For a calm background, keep both colours similar in brightness. For drama, add a dark third colour at one end.
- Warm: #FF512F → #F09819
- Cool: #2193B0 → #6DD5ED
- Night: #0F2027 → #2C5364
- Soft pastel: #FFDEE9 → #B5FFFC
Linear or radial?
Linear gradients run in a straight line at your chosen angle and suit wallpapers and banners. Radial gradients spread out from the centre and are good for spotlight effects behind a product or a profile picture.
Sizing for each use
Make the image the same size as where it will be shown, or bigger. Phone wallpapers should match the screen's shape, usually 9:19.5 on modern phones, which a 1080 × 1920 image covers when cropped slightly. For 4K monitors, choose 3840 × 2160 so the gradient stays smooth.
Using the CSS on a website
Copy the CSS line into a style rule, for example body or a hero section. CSS gradients load instantly because no image file is downloaded, and they stay sharp at any screen size.
Adding text afterwards
Use the downloaded gradient as a background in our Text to Image or YouTube Thumbnail Maker, or in any design app, to make quotes, announcements and covers.
Gradient banding and how to avoid it
Banding is the staircase effect you sometimes see in long, gentle gradients, especially on dark colours. It comes from the limited number of shades a screen can show, and JPG compression can make it worse. Download PNG for the smoothest result, avoid stretching two very similar dark colours across a 4K image, and add a third colour in the middle to break up long, slow transitions.
Phone and computer
The preview updates as you move the sliders. Large sizes like 4K are drawn only when you download, so the page stays fast on phones. For the code version use the CSS Gradient Generator, and pick colours with the Color Palette Generator.
Features
- Linear and radial gradients
- 2 to 5 colour stops
- Any angle from 0° to 360°
- Wallpaper, story, post and banner sizes
- Custom sizes up to 8,000 px
- CSS code included
Frequently asked questions
What sizes can I make?
Presets for 1920 × 1080 and 4K desktops, 1080 × 1920 phone wallpapers and stories, 1080 × 1080 posts, 1280 × 720 thumbnails and 1500 × 500 banners, or any custom size from 16 to 8,000 pixels.
PNG or JPG?
PNG gives the smoothest result with no compression artefacts. JPG makes a smaller file and is fine for most photos and wallpapers.
Why do I see faint bands in my gradient?
Screens show 256 levels per colour, so very subtle gradients across big areas can show steps. Choosing colours further apart, or a PNG, reduces it.
Will the CSS look exactly like the image?
Yes. The angle and colour positions use the same rules as CSS linear-gradient and radial-gradient.
What does the angle mean?
0° goes from bottom to top, 90° from left to right and 180° from top to bottom, the same as in CSS.
Can I use the images commercially?
Yes. You made them; there's no watermark and no attribution needed.