100% free · runs in your browser

Overlay images online

Layer one picture on top of another with independent opacity per image. Drag to position, scroll to resize, reorder the stack, and download a full-quality file — transparent PNGs stay transparent.

Nothing is uploaded No watermark No signup
Start with a base image

Drop or browse for the picture that goes underneath — it sets the canvas size. The next picture lands on top of it. You can also paste from the clipboard with Ctrl+V.

Click a layer to select it · drag to move · scroll to resize

How it works

How to overlay images online

Three steps to put one picture on top of another — no software to install, no account to create, no upload wait.

1

Add the base image

Drop in the picture that sits underneath — a photo, a screenshot, a design. It becomes the bottom layer and sets the size of the final image.

2

Layer and blend on top

Add the second picture, then drag it into place, resize it with the scroll wheel or slider, and set its opacity. Every layer keeps its own transparency, so a logo at 30% can sit over a full-strength photo.

3

Download the result

Export as PNG to keep transparency intact, or as JPG when you want a smaller opaque file. The image is generated on your device at full resolution.

What it is for

Reasons to put one image on top of another

Watermarks and logos

Drop your logo over a photo and pull its opacity down to 20–40%: it stays readable while the picture stays the subject. Position it once, then reuse the same settings for the rest of a shoot.

Double-exposure blends

Blend a portrait with a texture or a landscape by setting the top layer to 40–60% opacity — the classic double-exposure look, without a layer-based editor.

Thumbnails and graphics

Combine a background with badges, arrows, and label graphics. Each piece stays independently movable and re-scalable until you export, unlike a one-shot template.

Product and screenshot mockups

Place a UI screenshot inside a device frame, or a product shot inside a scene. A transparent-PNG frame overlays the base image without covering it.

The details that matter

Opacity and transparency, explained

Opacity is per layer, not per project

One global transparency slider is the tell that an overlay tool was really a merger with a toggle. Here each image in the stack keeps its own opacity: a watermark at 25% can sit over a photo at 100% and a caption graphic at 80% in the same composition. Select a layer and its slider edits only that layer.

Transparent PNGs stay transparent

Overlaying is only half transparent if the export is not. PNG keeps the alpha channel end to end: a base image with a clear background stays clear behind everything you stack on it, and a logo exported from this tool keeps its cut-out edges for the next time you use it. JPG has no alpha channel, so JPG exports are composited onto white first — the right choice when the result is an opaque photo and you want a smaller file.

The base image sets the frame

The first picture you add defines the canvas size, which keeps the mental model simple: the background is the frame, everything else lands on it. Reordering above the base is free — bring a layer forward or send it back at any time — but the base itself always stays at the bottom.

FAQ

Overlay image questions

What does it mean to overlay images?
Overlaying images means putting one picture on top of another so both show through in the same frame — the top picture can sit at full strength or be made see-through. It is different from merging photos side by side: an overlay composes the pictures into one shared canvas, which is how watermarks, logos, badges, and double-exposure effects are made.
How do I put one image on top of another?
Add your background picture first — it becomes the base and sets the canvas size. Then add the second picture, which lands in the middle of the canvas as a top layer. Drag it where you want it, resize it with the scroll wheel or the scale slider, lower its opacity if it should show through, and download. The result is one flattened image file.
What does opacity mean, and what does 50% transparency look like?
Opacity is how solid a layer appears. At 100% the layer fully covers whatever is beneath it; at 50% the two pictures blend evenly, like a ghost; at 0% the layer disappears entirely. A watermark usually sits between 20% and 40% so it is readable but does not hide the photo under it.
Should I export the overlay as PNG or JPG?
PNG if anything in the result should stay transparent — for example a base PNG with a transparent background, or an overlay exported without a background at all. JPG does not support transparency, so this tool composites JPG exports onto white first. For opaque photos either format works; PNG is lossless while JPG uses adjustable compression.
Can I use this to put a logo or watermark on my photos?
Yes, that is the most common use. Add the photo as the base, add the logo as the top layer, drag it into a corner, and set its opacity to around 20–40% so it reads without covering the picture. Export as PNG to keep everything crisp. For a whole batch, do the photos one at a time — the tool keeps your last layer settings during a session.
How many images can I stack on top of each other?
Up to ten layers in total, including the base. Each layer keeps its own position, scale, and opacity, and you can reorder them at any time, so a photo with a logo, a badge, and a caption graphic on top is well within range.
Can I change which image is on top after layering?
Yes. Select a layer in the panel and use the up or down arrows to move it forward or backward in the stack. The base image always stays at the bottom because it defines the canvas size, but every layer above it can be reordered freely.
Are my images uploaded to a server?
No. The overlay is composited directly in your browser with the HTML5 Canvas API, and the exported file is generated on your own device. Nothing is sent anywhere, nothing is stored, and closing the tab discards everything.

Link to This Tool

Bloggers, designers, and forum members are welcome to share this page. Copy the snippet below to credit the source.

<a href="https://freeimagemerger.com/overlay-images/">Image Overlay Tool</a> — free online tool