Making a gradient image for banners and backgrounds
A gradient image is a quick way to fill a wide banner without a photo. This guide explains size and direction choices.
What is the Gradient Image Generator?
Set two colours, a size and a direction, and this tool prepares a gradient image in the browser, where you can download it as a picture. In a non-browser run it reports the size and CSS so the settings are still fully checkable.
How to use it
- Pick two colours and a direction.
- Set the image size.
- In a browser, save the drawn gradient as an image.
Worked example
An 800 by 600 gradient image from #FF5733 to #33A1FF, left to right, ready to draw and download in a browser.
Which size should a gradient image be?
Match the place it will appear: a wide banner needs a wide canvas, while a square post needs equal sides.
Frequently asked questions
What file format do I get?
The browser download is a standard image file drawn from the canvas.
Can I use the gradient as a background?
Yes, it works well as a banner, header or social background.