Image Gradient Background
Put a smooth linear or radial gradient behind a transparent image, such as a product cut-out, logo or app screenshot. Pick two colors, the angle of a linear gradient and the padding around the image, and the tool draws the gradient at the exact output size and places your image on top. Transparent areas reveal the gradient, and the result downloads as PNG, JPEG or WebP for stores and social media.
Frequently asked questions
Which images work best?
Images with transparent areas, such as PNG or WebP cut-outs of products, logos or people, show the gradient behind the subject. An image without transparency covers the gradient, which then only appears in the padding around it.
What is the difference between linear and radial?
A linear gradient blends from the start color to the end color along a straight line at the chosen angle. A radial gradient starts with the start color in the center and reaches the end color at the corners.
How does the angle work?
The angle follows the CSS convention: 0 degrees runs from bottom to top, 90 from left to right, 180 from top to bottom and the default 135 from the top left to the bottom right. The angle is ignored for radial gradients.
What does padding do?
Padding adds 0 to 1000 pixels of gradient on every side of the image, so the output is the image size plus twice the padding. It gives cut-outs breathing room, like a studio backdrop.
Which colors can I use?
Enter hex colors such as #6366f1 and #ec4899, in three, four, six or eight digits, where the last two digits of an eight-digit color set its opacity. The word transparent fades the gradient out to nothing.
Will the output have the same size as my image?
With padding set to 0 it does. Otherwise it grows by the padding, and if the total would exceed 4000 pixels on a side, the image is scaled down so the result stays within 4000 pixels.
Which formats are supported?
You can upload JPEG, PNG, GIF, WebP, TIFF and AVIF images up to 5 MB. The result is a PNG by default, or JPEG or WebP at quality 90.
Is the gradient smooth?
Yes. The gradient is drawn as a vector at the exact output size, so it has no visible steps or scaling artifacts. PNG output keeps it lossless.
Can I use it for app store screenshots?
Yes. Upload a screenshot with rounded transparent corners, add 80 to 200 pixels of padding and pick your brand colors for a polished promotional image.
Does the tool remove the existing background?
No. It only fills areas that are already transparent and adds the padding. Remove the background first with a background removal tool if your photo still has one.