Add Background to Transparent Image

Transparent PNG and WebP images look great on a website but turn black or checkered in some apps, marketplaces and messengers, and many forms only accept JPG. This tool puts a background behind the transparent parts — a solid colour, a gradient, another photo or a blurred copy of the image itself — and can add even padding around it, for example to give a product cut-out some breathing room. Process many images at once and save them as PNG, JPG or WebP. Everything happens in your browser.

How to use this tool

1. Choose one or more images with transparency.
2. Pick the background: colour, gradient, another image or blur.
3. Set the colours, the gradient direction or the background image.
4. Optionally add padding around the image.
5. Choose the format and download the results.

Formula

padding (px) = padding % ÷ 100 × min(width, height); new size = (width + 2 × padding) × (height + 2 × padding)

Gradients follow CSS linear-gradient: the angle is measured clockwise from “to top”, and the gradient line through the centre is |W·sin a| + |H·cos a| long, so the first and last colours reach the corners. A background image is scaled to cover the whole frame and centred.

Example

A 1000 × 800 product PNG with 10% padding gets 80 px on every side (10% of 800), giving a 1160 × 960 px image on a white background — ready for a marketplace that requires a white, non-transparent product photo.