Compose two images in layers
Position and blend a foreground image over a background. Processing stays in your browser.
Images
Choose background
Choose foreground
Composite preview
Click the preview to place the foreground. Centering is turned off for both axes when you click.
What this tool does
Place one image over another on a single canvas. The background defines the output dimensions; the foreground can be moved, transformed and faded before the combined PNG is saved.
How to use it
- Choose a background image and a foreground image. Use Swap layers if they are in the wrong order.
- Keep an axis centered, move its position slider after turning centering off, or click the preview to place the foreground.
- Adjust size, rotation, opacity or flips and download the composed PNG.
Understand the controls
- Position
- X and Y are the foreground’s top-left position as a percentage of the background dimensions. Clicking the preview places the foreground around the clicked point and turns off both center locks.
- Transform and opacity
- Size scales the foreground from its original dimensions. Rotation pivots around its center; flips mirror it. Opacity blends it with the background without removing its existing alpha.
Example
For a subtle corner logo, choose a transparent PNG as the foreground, set its size to around 20%, turn off centering and lower opacity before placing it near an edge.
Files and limits
Each source file may be up to 15 MB, 8192 px per edge and 32 million pixels. Animated GIFs contribute their first frame. Output is one PNG at the background dimensions.
Frequently asked questions
Which image sets the output size?
The background image determines the PNG dimensions.
Can I place the foreground manually?
Yes. Turn off centering, use the position controls, or click the preview.
Is transparency preserved?
Yes. The foreground is blended using its alpha and the chosen opacity.