Gradient Image
Linear, radial and conic gradient backgrounds
How to use Gradient Image
- Set the options you want.
- Watch the preview update as you change things.
- Download the result.
About this tool
Design linear, radial and conic gradients with two to five color stops and download them as images at any size. Start from a preset, then adjust the angle, the center point and each stop’s color and position.
The matching CSS is shown under the preview, so you can use the same gradient on a website. Linear and radial gradients can also be saved as SVG, which stays smooth at any size.
- Works on your device. Nothing is uploaded.
- Free, with no sign-up and no watermark.
- No limits on file count or size beyond what your device can handle.
Questions and answers
Does the image match the CSS exactly?
Yes. Angles, center points and the default gradient size follow the same rules as CSS, so a 1920 × 1080 image looks like the CSS gradient on a box of that size.
What does dithering do?
Smooth gradients can show visible steps, called banding, because each channel only has 256 levels. Dithering adds very fine noise that hides the steps. It makes PNG files much larger, so use it mainly for JPG and WebP.
Why can’t conic gradients be saved as SVG?
SVG has no conic gradient type. Save conic gradients as PNG, JPG or WebP instead.
Is Gradient Image free?
Yes. Every tool on ImgImage is free to use, with no sign-up, no watermark and no limit on how many files you process.
Does it work on my phone?
Yes. It works in any modern browser on phones, tablets and computers. Large files are processed faster on a computer.