Overlay Image on Image

Putting one picture on top of another covers a lot of everyday jobs: a logo or badge on product photos, a sticker on a meme, a texture or light leak over a photo, a frame or a “sold” stamp. Choose a base image (or many) and an overlay, place it with nine anchor positions plus fine offsets, scale it relative to the base, set its opacity and rotation, and pick a blend mode — multiply makes white areas of the overlay vanish, screen does the same for black. Everything runs in your browser.

How to use this tool

1. Choose one or more base images and the overlay image.
2. Pick a position and nudge it with the offsets.
3. Set the overlay width as a share of the base width.
4. Adjust opacity, rotation and the blend mode.
5. Download each result, or all of them as a ZIP.

Formula

overlay width = base width × size %; centre x = anchor × (W − w) + w ÷ 2 + offset × W

The anchor is 0 for left, 0.5 for centre and 1 for right (the same vertically), so a top-left overlay touches the top-left corner and a centred one sits in the middle. The height keeps the overlay's proportions. Blend modes follow the W3C Compositing and Blending definitions: multiply = base × overlay, screen = 1 − (1 − base)(1 − overlay), and so on.

Example

A 1200 × 800 photo with a 600 × 200 logo set to 25% width, bottom right, −2% / −2%: the logo becomes 300 × 100 px, its top-left corner lands at x = 1200 − 300 − 24 = 876, y = 800 − 100 − 16 = 684, leaving a small margin from the corner.