ffee All tools
EN 中文 FR DE

Gradient Image Generator

Design a linear or radial gradient and export it as a ready to use PNG.

Design a gradient

135°
Download PNG
Image: 1200 x 800 px
Stops: 2
Gradients are painted on a local canvas; nothing is uploaded from your browser.

How to use the Gradient Image Generator

  1. Choose a linear or radial gradient and set the image size.
  2. Pick your colours, drag the angle and adjust the stop positions.
  3. Click Download PNG to save the gradient, or copy the CSS.

Features

Advertisement

More tools

SVG Previewer Favicon Generator Collage Maker Image Stitcher Image Splitter Sprite Sheet Generator Image Grid Maker Placeholder Image Generator Solid Color Image Pattern Image Generator Meme Generator Image Caption Tool

Frequently Asked Questions

Common questions about the free online gradient image generator.

Pick linear or radial, choose two or three colours, set the stop positions and angle, then click Download PNG to save the file.
A linear gradient blends colours along a straight line at your chosen angle, while a radial gradient blends outwards from the centre.
Yes. Tick the middle colour box to add a third stop, and adjust its position to control where the middle blend sits.
Stops are percentages along the gradient. A stop at 0 is the start, 100 is the end, and 50 places that colour in the middle.
The angle rotates a linear gradient. At 0 degrees the blend runs left to right, and 90 degrees runs top to bottom.
Yes. The copy CSS button puts an equivalent CSS gradient declaration on your clipboard so you can paste it into a stylesheet.
No, the exported PNG fully covers the canvas with the gradient colours, so it works as a solid background image anywhere.
No. Gradients are painted and encoded on a canvas inside your browser, so nothing is transmitted anywhere.
Yes. The gradient generator is free with no sign-up, no watermark and no limit on the number of exports.

Last updated: October 10, 2026