BYTETOOLS

Blend Two Images

Composite two images with multiply, screen, overlay, soft light, difference and seven more blend modes, plus opacity and alignment controls.

1 · Base image (bottom layer)Sets the output size — processed locally, never uploaded

No base image yet.

2 · Blend image (top layer)Scaled onto the base using the fit mode below

No blend image yet.

100
—
Output size
Multiply
Mode
100%
Opacity

Add the base image to see the blend. Both layers are needed before anything is composited.

What is the Blend Two Images?

Blend modes are the maths behind every double exposure, texture overlay and light leak. This tool implements the twelve separable modes from the W3C compositing specification — the same formulas Photoshop, GIMP and CSS use — and applies them channel by channel to two images you supply.

  • Twelve separable blend modes implemented per channel from the W3C compositing spec
  • Cover, fit, stretch and centre alignment for images of different sizes
  • Opacity slider that mixes the blended result back over the base
  • Respects the top image's own alpha channel as well as the opacity setting
  • Base image sets the output dimensions, so the result drops straight back into your layout
  • Both images stay on your device — no upload, no account

How to use the Blend Two Images

  1. 1

    Drop the base image into the first box — it sets the output size.

  2. 2

    Drop the image you want to blend on top into the second box.

  3. 3

    Pick a blend mode: multiply and screen for exposure, overlay and soft light for contrast, difference for comparing two shots.

  4. 4

    Choose how the top image is fitted — cover, fit inside, stretch or centre at its original size.

  5. 5

    Pull the opacity slider back for a subtler mix, then click Download PNG.

About the Blend Two Images

Blend modes are the maths behind every double exposure, texture overlay and light leak. This tool implements the twelve separable modes from the W3C compositing specification — the same formulas Photoshop, GIMP and CSS use — and applies them channel by channel to two images you supply.

The first image sets the output size and acts as the backdrop; the second is scaled onto it using the fit mode you choose, so mismatched sizes are not a problem. An opacity slider mixes the blended result back over the base, which is how you get a subtle texture instead of a full-strength one.

Nothing is uploaded. Both images are decoded and composited on a canvas in your own browser, so private photos, client work and unreleased artwork never leave your machine.

Frequently asked questions

What does the multiply blend mode do?

Multiply multiplies the two colour values together, so the result is never lighter than either input. White in the top image leaves the base untouched and black turns everything black, which makes it the standard way to lay a shadow or a dark texture over a photo.

What is the difference between overlay and soft light?

Both increase contrast using the top image as a map, but overlay is a hard, doubled contrast curve while soft light applies a much gentler S-curve. Soft light is the safer choice for photo retouching; overlay is punchier and can clip highlights.

Do I need both images to be the same size?

No. The base image sets the output size and the second image is scaled onto it using the fit mode you pick — cover fills the frame and crops the overflow, fit inside letterboxes it, and centre places it at its original pixel size.

How do I make a double exposure?

Load a portrait as the base and a texture or landscape as the top image, then try screen or lighten with the opacity around 60 to 80 percent. Screen keeps the bright parts of both frames, which is what gives the classic double-exposure look.

What is difference mode useful for?

Difference shows the absolute gap between the two images, so identical areas come out pure black. That makes it a quick way to check whether two exports really are pixel-identical, or to see exactly what a compression setting changed.

Related tools