Are my pictures uploaded anywhere?

No. Pictures are decoded and composited in this browser tab. Only blend, opacity and placement settings are remembered; neither picture is stored. If browser storage is blocked, the tool still works.

Does the downloaded PNG match what I see on the canvas?

The saved PNG uses the same placement, scale, rotation, blend and opacity as the preview, at the base image's own resolution. Anything outside the canvas is clipped. The selection outline and corner handles are editing controls and are not included in the file.

What do the seven blend modes actually do?

Normal places the overlay on top. Multiply darkens overlapping opaque colours; Screen lightens them. Overlay multiplies in dark base areas and screens in light ones. Darken and Lighten keep the darker or lighter channel. Difference shows the distance between channels, so identical opaque pixels become black at full opacity. Opacity controls how strongly the chosen effect appears.

Can I place the overlay without a mouse?

Yes. Tab to the overlay and the arrow keys move it one base pixel at a time, or ten at a time with shift held. Each of the four corner handles is a button in the tab order, and its arrow keys change the scale. Scale and rotation also have plain number fields, so an exact 0.42 or an exact 15 degrees can be typed rather than dragged, and the current position, scale and angle are printed under the canvas as text for anyone not looking at it.

Does a transparent PNG on top keep its transparency?

Yes. Alpha is respected on both sides: the holes in a transparent overlay let the base show through, and a base image with transparent areas stays transparent in the exported PNG, because the export is written as PNG and nothing is painted behind it. The alpha of the overlay and the opacity you set are multiplied together, so a half-transparent picture at 50 per cent opacity contributes a quarter.

Is there a limit on how big the pictures can be?

Each picture may hold up to 50 megapixels. That ceiling is on pixels rather than on bytes, because the canvas has to hold four bytes for every pixel of each image, and a picture past that point is more likely to fail in the browser than to composite. The size of the file on disk is not checked at all: nothing is uploaded, so the bytes are nobody's business. A picture over the ceiling is refused in words that name the ceiling and its own size, rather than producing a blank canvas.

Why does the overlay look slightly softer after I rotate it?

Rotating a picture means resampling it: the pixels of the overlay no longer line up with the pixels of the canvas, so the browser has to interpolate between them, and fine detail and hard edges soften a little. It is the same in the preview and in the export. The base image is never resampled on the way out, because the export canvas is exactly its size and it is drawn one pixel to one pixel, so only the overlay is affected.

Can I use this to put a watermark or a logo on a photo?

Yes. Load the photo as the base, load the logo as the overlay, drag it into the corner you want, scale it with a handle and drop the opacity until it sits where you like. The overlay cannot be dragged off the canvas entirely: at least a small part of it stays over the picture, so it cannot be lost past the edge. It is one pair at a time, though, since there is no batch mode here: repeating it over a folder of photographs means loading each one as the base.

How do I overlay one image on another?

Choose Base picture, then Overlay picture. Drag the top picture into position, use a corner handle to resize it, and enter Rotation if needed. Set Blend and Opacity, then press Download PNG. Reset restores Normal at full opacity and centres a fitted overlay.

How do I add a colour overlay or a grid?

Load the base picture. Under Generate overlay, choose Colour or Grid and pick a colour, then press Use generated overlay. Colour starts at 30% opacity. Grid starts at full opacity with transparent gaps and one-pixel lines; Grid divisions splits the longest side into 2 to 40 equal cells. Adjust Opacity or Blend for the effect you want. Generating replaces the current overlay. Apply again after changing the base picture or generation controls.

Can I overlay images on an iPhone, Android phone or Windows computer?

Yes, in a current browser with file selection and a 2D canvas. On a phone, choose pictures from the file picker and drag the overlay with a finger. Number fields also set scale and rotation. The core overlay and PNG export are free, with nothing to install. Large pictures may exceed the device's available memory.

Can this add text or keep a GIF animated?

This tool layers still pictures, colours and grids. Use Image Watermark for a text label. A GIF that the browser can decode can appear as a picture, but the PNG export is a still image; it does not preserve animation.

Does this keep an image over other windows for tracing?

No. The overlay stays inside this page's canvas. It does not pin a transparent window over other applications or add overlays to a video.

Image Overlay

Choose a base picture and an overlay picture, or generate a colour layer or square grid. Drag the overlay, scale it with a corner handle, and set its rotation, opacity and blend mode. Save the composite as a PNG at the base picture's resolution. Pictures stay in this tab and are never uploaded; no account is needed.

The composite appears here.

· or drop two pictures anywhere on the stage

Never uploadedNo accountComposited in this tabExported at full size

Blend

Opacity

100%

Scale

Rotation

Generate overlay

Colour

Replaces the top picture with a full-size colour layer or square grid. Grid divisions (2 to 40) split the longest side into equal cells. Apply again after changing the colour, divisions or base picture.

HTML and CSS overlay examples

Save either example as overlay.html beside your image files and open it in a browser. The picture example uses an 800 by 600 base.jpg and a 200 by 100 overlay.png, centred at scale 1, rotation 0, Normal blend and 30% opacity. Both layers resize together. Replace the alt text for your pictures.

Image over image

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image overlay</title>
<style>
.photo { position: relative; isolation: isolate; overflow: hidden; max-width: 800px; }
.base { display: block; width: 100%; height: auto; }
.overlay { position: absolute; left: 50%; top: 50%; width: 25%; height: auto;
  transform: translate(-50%, -50%) rotate(0deg); opacity: 0.3; }
</style>
<div class="photo">
  <img class="base" src="base.jpg" width="800" height="600" alt="Base picture">
  <img class="overlay" src="overlay.png" width="200" height="100" alt="Overlay picture">
</div>
</html>

The colour example uses the same base.jpg with a black layer at 30% opacity, matching a newly generated Colour overlay. Change the background colour or opacity in its style.

Colour over image

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colour overlay</title>
<style>
.photo { position: relative; isolation: isolate; overflow: hidden; max-width: 800px; }
.base { display: block; width: 100%; height: auto; }
.photo::after { content: ""; position: absolute; inset: 0; background: #000000;
  opacity: 0.3; pointer-events: none; }
</style>
<div class="photo">
  <img class="base" src="base.jpg" width="800" height="600" alt="Base picture">
</div>
</html>

The overlay sits on top, dimmed only by the opacity you set. Drag the overlay to move it, drag a corner to scale it, and type an angle to rotate it. With the keyboard, tab to the overlay and the arrow keys move it a pixel at a time, or ten at a time with shift. Both pictures are read in this tab, and each one may hold up to 50 megapixels.

Overlaycentre, scale and angle in base pixels
no overlay yet
Blend checkNormal: #E08573 over #5078A0 at 100%
#E08573
Exportthe base image's own resolution
no base picture yet

What you see on the canvas is what the file holds. Compositing is the standard source-over alpha formula with the canvas blend modes, computed in your browser at the base image's own resolution. The export runs the same path as the preview, so a handle you drag lands on the same pixel in the downloaded PNG. Rotation resamples the overlay, which softens fine detail slightly; the base image is never resampled. Both pictures are opened and composited inside this tab, and the only things kept between visits are the blend, the opacity and where you last put the overlay.

Common questions

Are my pictures uploaded anywhere?: No. Pictures are decoded and composited in this browser tab. Only blend, opacity and placement settings are remembered; neither picture is stored. If browser storage is blocked, the tool still works.
Does the downloaded PNG match what I see on the canvas?: The saved PNG uses the same placement, scale, rotation, blend and opacity as the preview, at the base image's own resolution. Anything outside the canvas is clipped. The selection outline and corner handles are editing controls and are not included in the file.
What do the seven blend modes actually do?: Normal places the overlay on top. Multiply darkens overlapping opaque colours; Screen lightens them. Overlay multiplies in dark base areas and screens in light ones. Darken and Lighten keep the darker or lighter channel. Difference shows the distance between channels, so identical opaque pixels become black at full opacity. Opacity controls how strongly the chosen effect appears.
Can I place the overlay without a mouse?: Yes. Tab to the overlay and the arrow keys move it one base pixel at a time, or ten at a time with shift held. Each of the four corner handles is a button in the tab order, and its arrow keys change the scale. Scale and rotation also have plain number fields, so an exact 0.42 or an exact 15 degrees can be typed rather than dragged, and the current position, scale and angle are printed under the canvas as text for anyone not looking at it.
Does a transparent PNG on top keep its transparency?: Yes. Alpha is respected on both sides: the holes in a transparent overlay let the base show through, and a base image with transparent areas stays transparent in the exported PNG, because the export is written as PNG and nothing is painted behind it. The alpha of the overlay and the opacity you set are multiplied together, so a half-transparent picture at 50 per cent opacity contributes a quarter.
Is there a limit on how big the pictures can be?: Each picture may hold up to 50 megapixels. That ceiling is on pixels rather than on bytes, because the canvas has to hold four bytes for every pixel of each image, and a picture past that point is more likely to fail in the browser than to composite. The size of the file on disk is not checked at all: nothing is uploaded, so the bytes are nobody's business. A picture over the ceiling is refused in words that name the ceiling and its own size, rather than producing a blank canvas.
Why does the overlay look slightly softer after I rotate it?: Rotating a picture means resampling it: the pixels of the overlay no longer line up with the pixels of the canvas, so the browser has to interpolate between them, and fine detail and hard edges soften a little. It is the same in the preview and in the export. The base image is never resampled on the way out, because the export canvas is exactly its size and it is drawn one pixel to one pixel, so only the overlay is affected.
Can I use this to put a watermark or a logo on a photo?: Yes. Load the photo as the base, load the logo as the overlay, drag it into the corner you want, scale it with a handle and drop the opacity until it sits where you like. The overlay cannot be dragged off the canvas entirely: at least a small part of it stays over the picture, so it cannot be lost past the edge. It is one pair at a time, though, since there is no batch mode here: repeating it over a folder of photographs means loading each one as the base.
How do I overlay one image on another?: Choose Base picture, then Overlay picture. Drag the top picture into position, use a corner handle to resize it, and enter Rotation if needed. Set Blend and Opacity, then press Download PNG. Reset restores Normal at full opacity and centres a fitted overlay.
How do I add a colour overlay or a grid?: Load the base picture. Under Generate overlay, choose Colour or Grid and pick a colour, then press Use generated overlay. Colour starts at 30% opacity. Grid starts at full opacity with transparent gaps and one-pixel lines; Grid divisions splits the longest side into 2 to 40 equal cells. Adjust Opacity or Blend for the effect you want. Generating replaces the current overlay. Apply again after changing the base picture or generation controls.
Can I overlay images on an iPhone, Android phone or Windows computer?: Yes, in a current browser with file selection and a 2D canvas. On a phone, choose pictures from the file picker and drag the overlay with a finger. Number fields also set scale and rotation. The core overlay and PNG export are free, with nothing to install. Large pictures may exceed the device's available memory.
Can this add text or keep a GIF animated?: This tool layers still pictures, colours and grids. Use Image Watermark for a text label. A GIF that the browser can decode can appear as a picture, but the PNG export is a still image; it does not preserve animation.
Does this keep an image over other windows for tracing?: No. The overlay stays inside this page's canvas. It does not pin a transparent window over other applications or add overlays to a video.

Compositing is the standard source-over alpha formula with the canvas blend modes, computed in your browser at the base image's own resolution. The export runs the same path as the preview, so a handle you drag lands on the same pixel in the downloaded PNG. Rotation resamples the overlay, which softens fine detail slightly; the base image is never resampled.