Summary
An image overlay tool places one picture on top of another and controls how the two combine. To overlay images free and privately here, click Upload Base Image, click Add Overlay Layer, drag the overlay where you want it, set its Opacity, Size and Blend Mode, and click Download Combined Image. The work is done in your browser, so nothing is uploaded, which you can confirm in the Network tab of DevTools.
Each overlay is a separate layer with its own position, size, opacity and blend mode (16 to choose from); the result is saved at the base image's full pixel size as PNG, JPG or WebP. To type words onto a picture instead, use Add Text to Image, and for a ready-made text or logo watermark, see the watermark tool.
Table of Use: Overlay Jobs and Settings
| Job | Settings | Result |
|---|---|---|
| Logo on a product photo | Transparent PNG, Quick position bottom right, Opacity 40–60%, Normal | A corner mark, 3% of the shorter side from the edges |
| Frame or sticker | Transparent PNG, Size slider to fit, Normal | The frame or sticker sits over the photo |
| Paper or film-grain texture | Texture image sized to cover the photo, Multiply or Overlay, Opacity 15–30% | A subtle texture across the picture |
| Glow or light leak on a black background | Blend Mode Screen | The black drops out and only the light remains |
| Spot differences between two similar images | Same-size second image, Size 100%, X and Y 0, Difference | Identical pixels turn black; changes stay visible |
| Mark 40 photos with one logo | Arrange once, then Apply these layers to more images… | Every photo marked, delivered as overlay-images.zip |
Features
- Any number of layers. Each keeps its own position, size, opacity and blend mode. The Layers list has Move up, Move down and Delete buttons, and the top of the list is drawn on top.
- Precise placement: drag in the preview, nudge with the arrow keys (1 pixel, or 10 with Shift), press Delete to remove the selected layer, use the nine-square Quick position grid or type X position and Y position in pixels.
- Opacity 0–100% and Size from 1% to 400% of the overlay's own pixels.
- 16 blend modes, shown below, applied with the browser's canvas compositing.
- Output: PNG (lossless), JPG with transparent areas filled white, or WebP, always at the base image's size. The blue selection outline is never exported.
- Batch mode applies your layers to more photos, scaled to each one.
| Blend Mode | What it does |
|---|---|
| Normal | Draws the overlay over the base |
| Multiply | Darkens; white has no effect |
| Screen | Lightens; black has no effect |
| Overlay, Soft Light, Hard Light | Increase contrast in different ways; Soft Light is the gentlest |
| Difference, Exclusion | Show how far apart the colours are; Exclusion has lower contrast |
| Hue, Saturation, Color, Luminosity | Take that colour property from the overlay and keep the rest from the base |
Darken, Lighten, Color Dodge and Color Burn complete the 16. Replacing the base image removes all layers. To combine photos side by side instead, use the collage maker.
How to Use the Image Overlay Tool
- Click Upload Base Image, or drop the background photo on the preview.
- Click Add Overlay Layer and pick one or several images. Each appears near the centre (several added at once are staggered slightly), no wider than half the base image and never enlarged beyond its own pixels.
- Drag the overlay in the preview, or use Quick position and the X and Y fields.
- In Layer Controls, set Opacity, Size and Blend Mode. Repeat for further layers and reorder them with the arrows in the list.
- Pick a format under Download as and click Download Combined Image. For more photos, click Apply these layers to more images….
Who Can Use It
Photographers and shop owners can mark pictures with a logo, and social media managers add badges or frames. Designers use Multiply, Screen and Overlay for textures. Add rounded edges first with the round corner generator, or a keyline with the image border adder.
Prepare overlays with the image cropper and image resizer, tilt a logo with the image rotator, or shrink the finished file with the image compressor.
FAQs
How do I overlay one image on another online?
Click Upload Base Image and pick the background photo, then click Add Overlay Layer and choose the image to put on top. Drag the overlay in the preview, or use the Quick position grid or the X and Y fields. Set Opacity, Size and Blend Mode, then click Download Combined Image.
How do I put a logo on a photo with a transparent background?
Use a PNG logo that already has a transparent background, because the tool keeps transparency but does not remove backgrounds. Add it as an overlay, press the bottom-right square of Quick position, lower Opacity to taste, and download. To repeat that on many photos, use Apply these layers to more images.
What is the difference between opacity and blend modes?
Opacity sets how see-through a layer is: 100% is solid and 0% is invisible. A blend mode sets how the layer's colours combine with the pixels underneath: Normal simply covers them, Multiply darkens, Screen lightens, and Difference subtracts. They work together, so Multiply at 30% gives a subtle darkening texture.
Can I apply the same overlay to many photos at once?
Yes. Arrange the layers on one photo, then click Apply these layers to more images and select the other photos. Each photo gets the same layers, scaled to its size and kept near the same edge or corner, so a bottom-right logo stays bottom-right on portrait and landscape shots. Several results download as one ZIP file, overlay-images.zip.
Why does my overlay look soft or pixelated?
An overlay is made of pixels, so setting Size above 100% stretches them beyond the file's own resolution and the edges turn soft. New overlays start at no more than 100%. For crisp results, use an overlay file at least as large as it will appear on the final picture, and keep Size at or below 100%.
Are my images uploaded when I use the overlay tool?
No. Compositing happens in your browser with the canvas API, so base images and overlays stay on your device and you can check the Network tab in DevTools. The tool never sends your images anywhere; the only file it loads on demand is its ZIP library, from this site, when a batch of two or more results is bundled.
What size and format is the downloaded image?
The result has exactly the base image's pixel size, named with _overlay before the extension. Choose Download as PNG (lossless, keeps transparency), JPG (smaller, transparent areas become white) or WebP. JPG and WebP are saved at 92% quality. Animated GIFs are drawn as still pictures, and the download is never animated.