Design with Gradient Canvas
Design a two-color gradient and export a PNG. Processing stays in your browser.
Gradient settings
Live preview
Output: 1200 × 630 px · PNG
Create a two-color image background. A transparent stop fades into whatever sits behind the PNG. Orientation changes the direction; zoom adjusts how quickly the colors meet.
What this tool does
Create a raster background from two color stops. The browser redraws the preview as you edit, so you can settle on a composition before exporting the full-size PNG.
How to use it
- Choose the starting and ending colors and enter the output width and height.
- Move Orientation to change the direction of the color transition. Adjust Zoom to make the transition spread out or concentrate.
- Turn on transparency if either stop should reveal the content behind the image, then download the PNG.
Understand the controls
- Orientation and Zoom
- Orientation rotates the transition. Zoom changes how quickly one color becomes the other; it does not change the output dimensions.
- Stop opacity
- The two opacity sliders appear when transparency is on. They control each end independently, and the exported PNG retains the resulting alpha values.
Example
For a page banner, start with a wide canvas such as 1200 × 630 px. To fade a colored edge into the page background, enable transparency and lower the opacity of the second stop.
Files and limits
Output is PNG. Width and height must each be 1–8192 px, with no more than 32 million pixels in total. Everything is rendered locally.
Frequently asked questions
Can I make a transparent gradient?
Yes. Enable transparency and set the opacity of each color stop. The PNG keeps the alpha channel.
What does zoom change?
Zoom controls how quickly the colors transition across the image. Higher values make the transition shorter.
Are images uploaded?
No. The gradient is rendered and exported in your browser.