Overlay Images
Overlay Images lets you stack one picture on top of another and composite them i
Overlay Images lets you stack one picture on top of another and composite them i
How to use Overlay Images
- Choose a base image and an overlay image using the two file pickers.
- Adjust opacity, size, position, rotation, and blend mode until the live preview looks right.
- Click Download PNG or Download JPG to save the combined image.
About Overlay Images
Overlay Images lets you stack one picture on top of another and composite them into a single image. Load a base image (the bottom layer) and an overlay image (the top layer), then adjust the overlay's opacity, size, horizontal and vertical position, rotation, and blend mode. A live preview updates as you drag each slider, and you can export the result as a PNG or JPG.
It works entirely in your browser using the HTML canvas. Your files are never uploaded to a server, so even private or sensitive images stay on your device. The output canvas matches the base image's exact pixel dimensions, and if your overlay is a transparent PNG (for example a logo or a cut-out), its transparency is preserved.
The tool is a fixed two-layer compositor: one base plus one overlay, positioned by sliders rather than free-drag. Blend modes (multiply, screen, overlay, and others) use the browser's native canvas compositing, so exactly which modes render can vary slightly between browsers. For pixel-perfect masking or many-layer edits, a dedicated editor is still the better choice.
Frequently asked questions
- How do I overlay one image on top of another?
- Choose a base image for the bottom layer and an overlay image for the top layer. Then use the opacity, size, position, and rotation sliders to place the overlay, and click Download PNG or Download JPG to save the combined image.
- Does it keep transparent (PNG) backgrounds?
- Yes. If your overlay is a PNG with transparency, such as a logo or a background-removed cut-out, the transparent areas stay transparent when composited over the base image and when you export as PNG. JPG export flattens transparency onto the base.
- Are my images uploaded anywhere?
- No. Everything runs locally in your browser using the canvas API. Your images are never sent to a server, so private photos stay on your device.
- What do the blend modes do?
- Blend modes control how the overlay's colors mix with the base image. Multiply darkens, screen lightens, and overlay boosts contrast, among others. They use your browser's native compositing, matching how photo editors combine layers.
- What size will the exported image be?
- The output always matches the base image's original pixel dimensions. The overlay is scaled and positioned within that frame, so the final file has the same resolution as your base picture.
- Which image formats can I use?
- You can load any format your browser can decode, including PNG, JPG, WebP, and GIF (first frame). You can export the composite as either PNG or JPG.