Image Overlay Tool

How to Use the Image Overlay Tool

Add a logo or watermark to a photo, or combine two photos or textures into a single image. Upload one “Base Image” for the bottom layer and one “Overlay Image” to place on top.

1. Upload a base image and an overlay image

Click “Choose Image” in each field to select a file, or drag and drop an image into the corresponding upload area. PNG, JPG, JPEG, and WebP still images are supported.

The base image forms the background of your composition and determines the width and height of the saved image.

2. Adjust the size and position

Drag the overlay image in the preview to move it, or drag one of its four round corner handles to resize it. You can also use the sliders and numeric inputs under “Size,” “Position,” and “Rotation.”

To move the image back to the center, click “Center Overlay” in the “Position” section.

3. Adjust opacity and blend mode

Set the overlay image’s opacity and choose a blend mode. Adjust these settings until you achieve the result you want.

4. Check the preview

The preview updates in real time as you change the settings.

Turn off “Show Guides” at the top right of the preview to hide the overlay outline and corner handles and check the finished composition. The outline and handles are never included in the downloaded image, even when “Show Guides” is on.

5. Download the image

Choose PNG, JPG, or WebP under “Save Format” below the preview. When you have finished editing, click “Download” to save your composition.

About Blend Modes

A blend mode determines how colors mix where the two images overlap. This tool offers the following 16 modes.

Mode	How colors are blended
Normal	Places the overlay image on top with its original colors.
Multiply	Multiplies the color values, darkening overlapping areas.
Screen	Brightens overlapping areas.
Overlay	Combines Multiply and Screen based on the light and dark areas of the base image.
Darken	Selects the darker value for each color channel.
Lighten	Selects the lighter value for each color channel.
Color Dodge	Brightens colors and emphasizes highlights.
Color Burn	Darkens colors and emphasizes shadows.
Hard Light	Combines Multiply and Screen based on the light and dark areas of the overlay image.
Soft Light	Gently lightens or darkens colors based on the light and dark areas of the overlay image.
Difference	Blends the images using the difference between their colors.
Exclusion	Creates an effect similar to Difference, but with lower contrast.
Hue	Keeps the overlay image’s hue (color tone), while matching its saturation and brightness to the base image.
Saturation	Keeps the overlay image’s saturation (color intensity), while matching its hue and brightness to the base image.
Color	Keeps the overlay image’s hue and saturation, while matching its brightness to the base image.
Luminosity	Keeps the overlay image’s brightness (luminosity), while matching its hue and saturation to the base image.

Reference: W3C blend mode specification

Save Formats and Image Size Limits

Output settings for each save format

Save format	Transparent areas	Compression and quality
PNG	Preserved	Lossless compression
JPG	Filled with white	Lossy compression (90% quality)
WebP	Preserved	Lossy compression (90% quality)

Selecting JPG fills any transparent areas remaining in the composition with white. To preserve transparency and partial transparency, choose PNG or WebP.

The compression quality for JPG and WebP cannot be changed. Compression during saving may cause small differences between the preview and the saved image.

An error is shown if your browser cannot save in the selected format. If this happens, try a different format such as PNG.

Output image dimensions

The saved image has the same width and height as the base image. Resizing or rotating the overlay does not change these dimensions.

Any part of the overlay outside the base image boundaries is cropped out.

Upload limits

Each uploaded file—the base image and the overlay image—must be 50MB or smaller.

The maximum image dimensions depend on your device and environment.

Standard limits: A longest side of up to 8192px and a total of up to 24 million pixels.
Environments using reduced processing limits, including smartphones: A longest side of up to 4096px and a total of up to 12 million pixels.

These limits apply separately to each of the two images.

Your device’s available memory or browser state may prevent processing even within these limits. If an error occurs, try smaller images.

FAQ

Can I make the white background around a logo transparent?

This tool does not automatically remove image backgrounds. To let the photo show around the shape of a logo, use a PNG or WebP image with a transparent background.

What should I do if the overlay image disappears?

Turn on “Show Guides” and check that opacity is not set to 0%. If the image has moved outside the preview, click “Center Overlay” to bring it back. If the blend mode makes it difficult to see, switch back to “Normal” and check the result.

Can I overlay more than two images?

You can edit two images at a time: one base image and one overlay image.

To add another image, download the current composition, upload it as a new base image, and then add the next overlay.

Can I adjust the position and size on a smartphone?

You can use touch gestures to drag the overlay image and resize it with the corner handles. For finer adjustments, use the “Position X (px),” “Position Y (px),” and “Size” numeric inputs.

Are my images sent to or stored on a server?

No. Image loading, compositing, and exporting are processed locally in your browser. Neither your uploaded images nor the finished composition are sent to or stored on a server.

Customization

Preview