PNG background generator
Fill the transparent areas of a PNG with a solid color, linear gradient, checkerboard or dot pattern, keep rounded corners and padding, then export as PNG or JPEG.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Files never leave your browser — everything runs locally
No image uploaded yet
Upload a PNG with transparency: the transparent area gets the background. JPEG export cannot keep transparency.
Source size: — Output size: —
What this tool does
- Fill the transparent areas of a cut-out PNG with a solid color, linear gradient, checkerboard or dots and get an image ready for slides or a product page.
- A transparent icon disappears on dark pages — add padding and a rounded background and it instantly reads as a card.
- JPEG export turns transparency into black blocks; flatten the background here first and the JPEG comes out clean.
- Make placeholder images for mockups: a checkerboard background makes every transparent pixel obvious at a glance.
Example
Input
#3B82F680
Output
rgba(59, 130, 246, 0.502)
An eight-digit hex color splits into RGB plus an 0–255 alpha channel; 80 becomes 0.502, while fully opaque colors report an alpha of 1.
Frequently asked questions
Are my images uploaded to a server?
No. The file is read into memory through the browser File API and every draw and export happens on a local canvas, so no request is made and it works offline.
Why does the JPEG export have black patches where the image was transparent?
The JPEG format has no alpha channel at all, so transparent pixels get encoded as black. Pick a solid color or gradient background first, then export as JPEG.
What does "padding is too large" mean?
Padding is subtracted from both sides, so it must stay below half of the shorter side. Beyond that the inner drawing area would be less than one pixel wide or tall, and the tool refuses to render.
How fine can the checkerboard and dot patterns be?
Cell size and dot spacing must be integers of at least 2. More than 20,000 pattern shapes triggers a "too dense" warning — increase the cell or spacing, otherwise the browser has to draw far too many shapes.
How is the gradient angle interpreted?
Exactly like CSS linear-gradient: 0° runs bottom to top and 90° left to right, and the gradient line length is the canvas projection along that direction, with endpoints on the canvas edges.
Keywords：png 背景透明背景png background背景填充棋盘格checkerboard线性渐变jpeg 质量圆角image background