Image Overlay Tool
Place a logo on a photo, combine a prepared cutout with a new background, or add a texture to an image. This browser-local tool combines one base image with one overlay: enter the X/Y position, set its scale and opacity, choose a blend mode, then download the flattened result as PNG.
How to overlay one image on another
-
1
Upload base and overlay images
The base fills the canvas; the overlay floats on top.
-
2
Enter position and scale
Set the overlay's X/Y pixel position and choose a scale from 5% to 200%.
-
3
Set opacity and blend mode
Full opacity for hard composites, 30-60% for subtle watermarks.
-
4
Download the result
Flatten the two layers into a PNG with the base image's canvas dimensions.
Overlays that look intentional
A useful two-layer composite starts with deliberate position, scale and blending.
Positioning
- Use the rule of thirds: place the overlay centre on a thirds intersection for editorial feel.
- Corner-placement watermarks work better at 10-15% padding from the edge.
- Centre-placement for balanced posters and social cards.
Scale
- Overlay rarely looks right above 60% of the base’s smaller side.
- A logo watermark is usually 5-15% of the width of the base.
Blend modes
For composites that look natural:
| Mode | Effect |
|---|---|
| Normal | Straight alpha composite |
| Multiply | Darkens: great for adding textures |
| Screen | Lightens: useful for glows and flares |
| Overlay | Contrast-boosting blend |
| Darken | Keeps the darker pixel of the two layers |
| Lighten | Keeps the lighter pixel of the two layers |
Scope and privacy
This tool positions, scales and blends one overlay. It does not rotate, crop, feather or add shadows, so make those edits before uploading when you need them. Both images are processed in your browser and are never placed in a funnel URL or sent to the server. In the guided funnel, IndexedDB keeps the temporary project on this device for up to 30 minutes so it can survive each step.
Common composites
- Product inside a phone or laptop mockup.
- Logo watermark in the corner of a photo.
- Badge or label placed on a flat background.
- Avatar inside a decorative frame.
- A prepared transparent cutout placed over a new background.
Frequently Asked Questions
The tool supports a base plus one overlay in a single pass. For multi-layer composites, export the result and use it as a new base for the next overlay.
Yes. If the overlay is a PNG with alpha, only the visible pixels are drawn on the base. JPG overlays have no transparency and appear as rectangles.
Normal for hard composites; Multiply for laying a texture (paper, grunge) over a photo; Screen for glows and highlights. Overlay, Darken and Lighten are stylistic, so experiment with them.
Use the numeric X/Y input fields rather than dragging. The tool accepts pixel-precise positions so alignment to a 1-pixel grid is possible.
Related Tools
Image Resizer
Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.
QR Code Generator
Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.
Image Compressor
Compress JPG, PNG and WebP images to reduce file size while preserving visual quality. Entirely in your browser, no upload.
Meme Generator
Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.
Barcode Generator
Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.
GIF Maker
Turn a sequence of images or a short video into an animated GIF. Set frame rate, loop count and dimensions before exporting.