About the Image Blend & Overlay Tool
Image Blend & Overlay Tool layers one image over another. Choose a base image and an overlay image, then set the blend mode — normal, multiply, screen, overlay, darken, lighten, difference and more — along with the overlay’s opacity, scale, rotation and position. Drag the overlay with a mouse or finger, or use the keyboard for precise moves.
Choose whether the canvas matches the base image, the overlay image or a custom size, and how each image fits it: contain, cover or stretch. The preview is the exact canvas that is downloaded, so what you see is what you get; the dashed outline is preview-only. Blend modes use the browser’s built-in canvas compositing, so results can differ slightly between browsers. Export as PNG to keep transparency, or as JPG with a background colour you choose.
How to use
- Choose the base image and the overlay image.
- Pick the canvas size and how each image fits.
- Choose a blend mode and adjust opacity, scale and rotation.
- Drag the overlay into place, or use the keyboard.
- Choose PNG or JPG and download.
Key features
- Twelve blend modes including multiply, screen, overlay, darken, lighten and difference.
- Opacity, scale, rotation and position controls.
- Contain, cover and stretch fitting for both images.
- Base-size, overlay-size or custom canvas.
- Mouse, touch and keyboard movement.
- Preview identical to the exported image.
- PNG with transparency or JPG with a chosen background.
Best practices
- Use multiply to darken with textures and screen to lighten.
- Lower opacity for subtle effects.
- Use PNG for the overlay when it needs transparent areas.
- Check the result in the browser you will use, as blending can vary slightly.
- Keep the canvas size close to the base image for the sharpest result.
Benefits
- Creative blends without image-editing software.
- Exact control of placement and transforms.
- What you see is what you download.
- Private: nothing is uploaded or stored.
Frequently asked questions
Does the download match the preview?
Yes. The preview is the same canvas that is exported, at the full output size. The dashed overlay outline is drawn on a separate layer and is never included.
What do the blend modes do?
Multiply darkens by multiplying colours, screen lightens, overlay increases contrast, darken and lighten keep the darker or lighter pixel, and difference subtracts colours. Normal simply places the overlay on top.
Why might the result differ in another browser?
Blend modes use each browser’s canvas compositing engine, which can produce slightly different values. Download the image to keep a consistent result.
How do I move the overlay with the keyboard?
Focus the preview and use the arrow keys (Shift moves 10 px). Plus and minus change the scale, and [ and ] rotate it.
What happens to transparent areas?
Areas with no image are transparent. PNG keeps them; JPG fills them with the background colour you choose.
How large can the output be?
Up to 8,192 px per side and about 16.7 megapixels in total.
Which files can I use?
PNG, JPG and WebP files up to 40 MB and 30 megapixels. Each file’s signature is checked and the whole image is decoded before use, so GIF, SVG, damaged files and files renamed from another format are refused with a clear message.
Are my images uploaded or saved?
No. Images are opened and processed in your browser on your device. Nothing is uploaded, and images, pixels, settings and results are not saved in browser storage. Reset releases them from memory.