By · Updated

Image Blend Modes

Blend Two Images With 15 Photoshop-Style Modes Such as Multiply, Screen and Overlay

No ratings yet

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Image Blend Modes works

This image blend modes tool layers one image on top of another using the same modes found in Photoshop, GIMP and Figma, from multiply and screen to soft light and luminosity, with an opacity slider for the top layer.

How to use image blend modes

Choose two images together. The bottom layer sets the size of the result, and the other becomes the top layer, fitted by cover, contain or stretch. Pick a mode, then lower opacity to soften the effect.

Darkening and lightening modes

Multiply and Darken keep the darker parts, perfect for adding textures, paper grain or line art over a photo. Screen, Lighten and Color dodge keep the lighter parts, good for light leaks, glows and bokeh overlays. Color burn darkens with extra contrast.

Contrast, difference and colour modes

Overlay, Soft light and Hard light boost contrast and blend textures into midtones. Difference and Exclusion compare the layers, handy for spotting changes between two versions of an image. Hue, Saturation, Color and Luminosity mix one property of the top layer into the bottom.

Private by design

Blending uses your browser's canvas compositing, and neither image is uploaded.

FAQ

Which blend mode should I use for a texture?

For paper, grunge or fabric textures, Multiply darkens neatly and Overlay or Soft light blends them into midtones. Lower the opacity to between 30% and 60% so the texture supports the photo rather than hiding it.

How can I compare two versions of an image?

Choose Difference mode at 100% opacity. Areas that match turn black, and anything that changed shows up brightly, which makes small edits, compression damage or moved objects easy to spot.

Do the images need the same dimensions?

No. The bottom layer sets the output size and the top layer is fitted to it. Cover crops the top image to fill, Contain shows it whole with gaps, and Stretch ignores its proportions.

Are these the same modes as Photoshop?

They follow the W3C compositing standard that browsers use, which matches the common modes in Photoshop, GIMP, Affinity and Figma. Small differences can appear in a few modes because of colour handling.

See also: all Images tools, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.

Related tools

Double Exposure Effect

Layer two photos into one dreamy double exposure.

Round Corners Image

Give any picture rounded corners or an oval crop with transparency.

Photo Collage Maker

Combine up to nine photos in grid layouts and download one image. Nothing uploaded.

Add Watermark To Image

Text or logo watermark in a corner or tiled across a photo. Nothing uploaded.

Replace Colour In Image

Swap one colour in a photo or graphic for another, keeping shading.