Blend images
This free online tool allows you to blend two images into a single image. Upload 2 pictures, choose one of the blend modes (multiply, screen, overlay, darken, lighten, difference, color dodge, color burn, and many others), adjust the opacity of each image, and download the blended image.
Everything runs directly in your browser: your images are never uploaded to a server.
1. Bottom image
Drop your image here
The base image, drawn first. You can also paste an image with CTRL+V.
2. Top image
Drop your image here
Blended over the bottom image. You can also paste an image with CTRL+V.
How to blend images?
To combine your two pictures into a single blended image, follow these simple steps:
- Upload the bottom image - Drop or select the base image, the one that is drawn first. You can also paste an image from the clipboard with CTRL+V.
- Upload the top image - Drop or select the image that is blended over the base image. The blended image will appear on the canvas.
- Choose the blend mode - Pick how the colors of the two images are combined: multiply, screen, overlay, darken, lighten, difference, color-dodge, color-burn, and many others.
- Adjust the opacity (optional) - Reduce the opacity of the top image to make the blend more subtle, or reduce the opacity of the bottom image to fade it out.
- Choose the size of the blended image - Use the size of the bottom image, of the top image, of the largest or of the smallest image, or type a custom width and height.
- Choose how to resize the images - Stretch each image to the size of the result, resize it keeping its aspect ratio (fit or cover), or keep the original sizes.
- Download the blended image - Click "Download blended image" to save the result as a PNG file.
Blend modes
A blend mode defines how the colors of the top image are combined with the colors of the bottom image. This tool uses the blend modes of the HTML canvas (the globalCompositeOperation property), which are the same blend modes used by image editors like Photoshop and GIMP.
| Blend mode | Description |
|---|---|
| source-over | The default mode: the top image is simply drawn over the bottom image. Combined with the opacity option, it creates a normal cross fade between the two images. |
| destination-over | The opposite of source-over: the top image is drawn behind the bottom image, so it is only visible through the transparent areas of the bottom image. |
| lighter | Adds the color values of the two images. The result is always brighter, and it easily becomes white where both images are bright. It is also known as additive blending. |
| lighten | Keeps, for each pixel, the lighter of the two colors. |
| darken | Keeps, for each pixel, the darker of the two colors. |
| xor | Keeps only the areas that are covered by exactly one of the images. The areas where both images overlap become transparent. |
| multiply | Multiplies the colors of the two images. The result is always darker, and white areas keep the other image unchanged. It is great to overlay textures and shadows. |
| screen | The opposite of multiply: the result is always lighter, and black areas keep the other image unchanged. It is great to overlay lights, fire and smoke. |
| overlay | A combination of multiply and screen: the dark areas of the bottom image become darker and the light areas become lighter, increasing the contrast. |
| color-dodge | Brightens the bottom image according to the top image, creating strong highlights. |
| color-burn | Darkens the bottom image according to the top image, creating strong shadows. |
| hard-light | Like overlay, but the roles of the two images are inverted: the top image decides which areas are multiplied and which ones are screened. |
| soft-light | A softer version of hard-light, similar to shining a diffused light over the bottom image. |
| difference | Subtracts the darker color from the lighter one. Identical areas become black, which makes it useful to compare two similar images. |
| exclusion | Similar to difference, but with a lower contrast and softer colors. |
| hue | Keeps the luminosity and the saturation of the bottom image, and uses the hue of the top image. |
| saturation | Keeps the luminosity and the hue of the bottom image, and uses the saturation of the top image. |
| color | Keeps the luminosity of the bottom image, and uses the hue and the saturation of the top image. It is often used to colorize black and white photos. |
| luminosity | Keeps the hue and the saturation of the bottom image, and uses the luminosity of the top image. It is the opposite of the color mode. |
Blend options
Below are the options you can configure when blending images.
| Field | Description |
|---|---|
| Blend mode | How the colors of the top image are combined with the colors of the bottom image. See the table above for the description of each blend mode. |
| Opacity of the bottom image | How opaque the bottom image is, from 0% (fully transparent) to 100% (fully opaque). |
| Opacity of the top image | How opaque the top image is, from 0% (fully transparent) to 100% (fully opaque). With the blend mode "source-over" and an opacity of 50%, you get a simple 50/50 mix of the two images. |
| Size of the blended image | The width and the height of the result. It can be the size of the bottom image, the size of the top image, the size of the largest image (the largest width and the largest height), the size of the smallest image, or a custom size typed by you. |
| How to resize the images | Stretch resizes each image to exactly the size of the result, which may distort images with a different aspect ratio. Fit resizes each image, keeping its aspect ratio, until it fits inside the result. Cover resizes each image, keeping its aspect ratio, until it covers the whole result, so the parts that do not fit are cropped. Do not resize keeps the original size of each image. |
| Alignment | Where each image is placed, horizontally (left, center or right) and vertically (top, middle or bottom), when it does not fill the whole blended image. It is not used when the images are stretched. |
| Transparent background | Keeps the transparency of the blended image. Disable it to draw the blended image over a background color. |
| Background color | The color used to fill the background of the blended image. The background is drawn behind the images, after the blending, so it never changes the result of the blend mode. |
Frequently Asked Questions (FAQ)
Are my images uploaded to a server?No. All the processing is done in your browser, so your images never leave your computer.
What happens if the images have different sizes?The blended image has the size you choose in the "Size of the blended image" option, and each image is resized to that size according to the "How to resize the images" option. If you choose "Fit" or "Do not resize", one of the images may not cover the whole result, and the areas that are not covered stay transparent, or are filled with the background color.
Which image is the bottom one and which one is the top one?The bottom image is the base image, drawn first, and the top image is blended over it. The order matters for most blend modes (overlay, color-dodge, color-burn, hue, color, luminosity, and others), so use the "Swap the images" button to quickly see both results.
How do I mix two photos 50/50?Keep the blend mode "source-over" and set the opacity of the top image to 50%. If you want to mix more than 2 images with the same weight, use the Average images tool.
Can I blend an image with a solid color?Yes. Disable the "Transparent background" option and pick a color, and it is drawn behind the images. If you want the color to take part in the blending, create a solid color image first and upload it as one of the two images.
Can I blend more than 2 images?This tool blends 2 images at a time. To blend a third image, download the result and upload it again as the bottom image.
In which format is the blended image downloaded?The blended image is downloaded as a PNG file, which supports transparency.