Image Overlay: How to Layer Images With Free Tools

An image overlay places one image on top of another — a logo on a product photo, a watermark across a portfolio piece, a color tint over a hero banner. The base image stays intact while the overlay sits above it, usually with some transparency so both layers remain visible.

You run into this task constantly: branding product shots for an online store, building before-and-after comparisons, adding copyright watermarks to photography, or creating composite thumbnails for YouTube. The technique is the same every time — position a second image (or color layer) over the first and control how they blend.

This guide covers five methods to overlay images, from a single CLI command to full GUI editors. Pick the one that fits your workflow.

Methods Overview

ImageMagick is the default recommendation for most overlay tasks. One command, full transparency control, and easy to script. CSS is the right choice when the overlay happens in a browser and does not need to produce a static file. Pillow is ideal when you need to overlay hundreds of images programmatically. GIMP excels at manual compositing where you want pixel-level control. FFmpeg is worth considering if your pipeline already uses it for video work.

Method 1: ImageMagick 7.1 (CLI)

ImageMagick is the most versatile command-line image tool available. Its composite command handles overlays in a single invocation with full control over position, opacity, and blending.

License: Apache 2.0 (free, open source).

Install

# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt install imagemagick

# Windows (winget)
winget install ImageMagick.ImageMagick

Basic overlay

Place logo.png on top of photo.jpg at the top-left corner:

magick composite logo.png photo.jpg output.jpg

The overlay image comes first, the base image second. The result is written to output.jpg.

Position the overlay

Use -gravity to anchor the overlay to a specific region, and -geometry to add pixel offsets from that anchor:

# Bottom-right corner, 20px from each edge
magick composite -gravity SouthEast -geometry +20+20 logo.png photo.jpg output.jpg

# Center
magick composite -gravity Center logo.png photo.jpg output.jpg

# Top-left with offset
magick composite -gravity NorthWest -geometry +10+10 watermark.png photo.jpg output.jpg

Control opacity

The -dissolve flag sets the overlay's opacity as a percentage. A value of 30 means 30% visible overlay, 70% base image showing through:

magick composite -dissolve 30 -gravity SouthEast watermark.png photo.jpg output.jpg

This is ideal for watermarking — subtle enough to not distract, visible enough to assert ownership.

Blend modes

ImageMagick supports blend modes similar to Photoshop layers:

# Multiply (darkens — good for texture overlays)
magick composite -compose Multiply texture.png photo.jpg output.jpg

# Screen (lightens — good for light leak effects)
magick composite -compose Screen light.png photo.jpg output.jpg

# Overlay (combines multiply and screen for contrast)
magick composite -compose Overlay gradient.png photo.jpg output.jpg

Batch overlay

Apply the same watermark to every JPEG in a directory:

for img in *.jpg; do
  magick composite -dissolve 25 -gravity SouthEast -geometry +20+20 \
    watermark.png "$img" "watermarked-$img"
done

For large batches, consider batch processing tools to prepare your images first.

Method 2: CSS Overlay Techniques

When the overlay happens on a webpage rather than producing a static file, CSS is the right tool. Three approaches cover most use cases.

Position-based overlay

Stack two images using position: relative on the container and position: absolute on the overlay:

<div style="position: relative; display: inline-block;">
  <img src="photo.jpg" alt="Base photo">
  <img src="logo.png" alt="Logo overlay"
    style="position: absolute; bottom: 10px; right: 10px; opacity: 0.5; width: 80px;">
</div>

The overlay image sits on top of the base at the bottom-right corner with 50% opacity. Adjust top, bottom, left, and right to reposition.

Color overlay with pseudo-elements

Add a tinted overlay using ::after:

.hero-image {
  position: relative;
  display: inline-block;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

This darkens the image by 40% — common for hero banners where text needs to remain readable against a busy photo.

Blend modes with mix-blend-mode

CSS blend modes work the same way as Photoshop layer blend modes:

.overlay-image {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

Supported modes include multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, and exclusion. Browser support for mix-blend-mode is universal in modern browsers (Chrome 41+, Firefox 32+, Safari 8+, Edge 79+).

Gradient overlay

A gradient overlay adds depth without a second image:

.card-image {
  position: relative;
}

.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

This creates a bottom-to-top fade from dark to transparent — perfect for placing text at the bottom of a card image.

Method 3: Python Pillow 10.2

Pillow is the Python imaging library. Use it when you need to overlay images programmatically — batch watermarking, automated thumbnail generation, or dynamic composite creation.

License: HPND (Historical Permission Notice and Disclaimer) — open source, similar to MIT.

Install

pip install Pillow==10.2.0

Basic overlay with Image.paste()

from PIL import Image

base = Image.open("photo.jpg").convert("RGBA")
overlay = Image.open("logo.png").convert("RGBA")

# Position: top-left corner at (50, 50)
base.paste(overlay, (50, 50), overlay)
base.save("output.png")

The third argument to paste() is the mask — passing the overlay itself uses its alpha channel for transparency. Without this argument, the overlay replaces pixels completely (no transparency).

Opacity control

Reduce the overlay's opacity before pasting:

from PIL import Image, ImageEnhance

base = Image.open("photo.jpg").convert("RGBA")
overlay = Image.open("watermark.png").convert("RGBA")

# Reduce overlay opacity to 30%
alpha = overlay.split()[3]
alpha = ImageEnhance.Brightness(alpha).enhance(0.3)
overlay.putalpha(alpha)

# Bottom-right positioning
x = base.width - overlay.width - 20
y = base.height - overlay.height - 20
base.paste(overlay, (x, y), overlay)

base.save("output.png")

Alpha compositing

Image.alpha_composite() is the correct method when both images have alpha channels and you want proper alpha blending (pre-multiplied alpha):

from PIL import Image

base = Image.open("photo.png").convert("RGBA")
overlay = Image.open("overlay.png").convert("RGBA")

# Resize overlay to fit
overlay = overlay.resize((200, 200))

# Create a blank canvas matching the base size
temp = Image.new("RGBA", base.size, (0, 0, 0, 0))
temp.paste(overlay, (100, 100))

result = Image.alpha_composite(base, temp)
result.save("composite.png")

Use alpha_composite() instead of paste() when working with semi-transparent overlays on semi-transparent bases — paste() can produce incorrect edge blending in those cases.

Batch watermarking

from PIL import Image, ImageEnhance
from pathlib import Path

watermark = Image.open("watermark.png").convert("RGBA")
alpha = watermark.split()[3]
alpha = ImageEnhance.Brightness(alpha).enhance(0.25)
watermark.putalpha(alpha)

for img_path in Path("photos/").glob("*.jpg"):
    base = Image.open(img_path).convert("RGBA")
    wm_resized = watermark.resize((base.width // 5, watermark.height * base.width // 5 // watermark.width))
    x = base.width - wm_resized.width - 20
    y = base.height - wm_resized.height - 20
    base.paste(wm_resized, (x, y), wm_resized)
    base.convert("RGB").save(f"output/{img_path.name}", quality=90)

After batch processing, run the results through Pixotter's compressor to optimize file sizes before publishing.

Method 4: GIMP 2.10 (GUI)

GIMP is the free desktop image editor for visual overlay work. Layers in GIMP work like physical transparencies stacked on a light table — each layer can be repositioned, resized, and blended independently.

License: GPL-2.0+ (free, open source).

Basic image overlay

1. Open GIMP 2.10. Go to File > Open and load your base image.
2. Add the overlay: File > Open as Layers and select your overlay image (a logo, watermark, or second photo).
3. The overlay appears as a new layer in the Layers panel. Select the Move tool (M) to drag it into position.
4. Resize the overlay: Layer > Scale Layer and enter the desired dimensions. Lock the chain icon to maintain aspect ratio.
5. Set opacity: in the Layers panel, adjust the Opacity slider. 30% works well for watermarks, 60-80% for logo placement.
6. Export: File > Export As and save as PNG to preserve transparency or JPEG for a flattened result.

Blend modes in GIMP

The Layers panel has a Mode dropdown above the opacity slider. Key modes for overlays:

• Multiply — darkens the base. Good for overlaying dark textures or shadows.
• Screen — lightens the base. Good for light effects and glows.
• Overlay — increases contrast. Combines multiply and screen.
• Soft Light — subtle version of Overlay. Good for color grading.

Adding a color overlay

1. Create a new layer: Layer > New Layer. Set fill to the color you want.
2. Set the layer mode to Multiply or Overlay depending on the effect.
3. Reduce opacity to 20-40%.
4. This tints the entire image — useful for creating consistent color themes across a set of photos.

Method 5: FFmpeg 6.1 (Video Frames and Thumbnails)

FFmpeg is primarily a video tool, but its overlay filter handles image compositing. This makes sense when you are already using FFmpeg for video work or need to overlay images onto video frames.

License: LGPL 2.1 for core libraries; GPL 2+ when compiled with certain codecs. Check your build with ffmpeg -version.

Overlay one image on another

ffmpeg -i base.jpg -i logo.png \
  -filter_complex "overlay=W-w-20:H-h-20" \
  output.jpg

W and H are the base image dimensions. w and h are the overlay dimensions. This places the logo 20px from the bottom-right corner.

Position shortcuts

# Center
ffmpeg -i base.jpg -i overlay.png \
  -filter_complex "overlay=(W-w)/2:(H-h)/2" \
  output.jpg

# Top-left with padding
ffmpeg -i base.jpg -i overlay.png \
  -filter_complex "overlay=10:10" \
  output.jpg

Opacity control

Use the format and colorchannelmixer filters to reduce overlay opacity before compositing:

ffmpeg -i base.jpg -i watermark.png \
  -filter_complex "[1]format=rgba,colorchannelmixer=aa=0.3[wm];[0][wm]overlay=W-w-20:H-h-20" \
  output.jpg

The aa=0.3 sets the alpha channel to 30% opacity.

Overlay on video

Where FFmpeg truly excels — adding a persistent logo to a video:

ffmpeg -i video.mp4 -i logo.png \
  -filter_complex "overlay=W-w-10:10" \
  -codec:a copy \
  output.mp4

This places the logo at the top-right corner of every frame. The audio stream is copied without re-encoding.

Overlay Types and When to Use Them

Watermark overlay

A semi-transparent logo or text placed over photos to assert ownership. Keep opacity between 25-40% — visible enough to discourage theft, subtle enough to not ruin the viewing experience. Position in a detail-rich area where removal with clone-stamp tools would be obvious. For a dedicated walkthrough, see our watermark guide.

Logo placement

Brand logos on product photos, social media posts, or marketing materials. Higher opacity than watermarks (50-80%) because the logo is part of the design, not a deterrent. Bottom-right corner is the convention. Use PNG with a transparent background for clean edges.

Before-and-after comparison

Two versions of the same image — one "before" and one "after" — overlaid with a slider or split. For static images, side-by-side composites work better than true overlays. For web, a JavaScript slider over two stacked images gives the interactive effect.

Color overlay

A solid or gradient color layer over an image, typically at 20-50% opacity. Darkening overlays (black at 30-40%) make white text readable over busy photos. Brand-colored overlays create visual consistency across a photo set.

Gradient overlay

A gradient from transparent to opaque, usually from top to bottom or bottom to top. Standard for card-style layouts where text sits at the bottom of an image. The gradient ensures readability without covering the entire photo.

Texture overlay

A texture image (film grain, paper, noise, bokeh) composited using blend modes like Multiply or Screen. Adds character to flat digital photos. Multiply darkens, so use light textures on dark bases. Screen lightens, so use dark textures that you want to glow.

Best Practices

Use PNG for overlay images

Overlays almost always need transparency. PNG supports full alpha channels — every pixel can be independently transparent, semi-transparent, or opaque. JPEG does not support transparency at all. If your overlay is currently a JPEG, convert it to PNG first. For a deeper comparison of when to use each format, see JPG vs PNG.

Calculate positions relative to the base

Hard-coded pixel positions break when the base image size changes. Use relative positioning:

• ImageMagick: -gravity SouthEast -geometry +20+20 adapts to any base size.
• CSS: bottom: 10px; right: 10px adapts to any container size.
• Pillow: x = base.width - overlay.width - 20 calculates dynamically.
• FFmpeg: overlay=W-w-20:H-h-20 uses the base and overlay dimensions as variables.

Preserve quality during compositing

Every save-load cycle on a JPEG degrades quality. When building multi-layer composites:

1. Work in PNG or keep images in memory (Pillow, ImageMagick) throughout the compositing process.
2. Convert to JPEG or WebP only at the final export step.
3. After compositing, run the result through Pixotter's compressor to optimize file size without additional quality loss.

Mind the file size

Composited images are often larger than either source because the output contains visual data from both layers. A 2MB photo with a 500KB overlay can produce a 3MB+ result. Reduce the file size before publishing, especially for web delivery.

Match color spaces

When overlaying images from different sources, color space mismatches (sRGB vs Adobe RGB vs Display P3) cause subtle color shifts. Convert both images to sRGB before compositing — it is the web standard and what most displays render.

FAQ

What is an image overlay?

An image overlay is a layer placed on top of a base image. The overlay can be another image (a logo, watermark, or photo), a solid color, a gradient, or a texture. Transparency controls how much of the base image shows through the overlay. Every image editor, CSS engine, and CLI image tool supports some form of overlay compositing.

What file format is best for overlays?

PNG is the standard because it supports full alpha-channel transparency. Each pixel in a PNG can have its own opacity level, from fully transparent to fully opaque. WebP also supports transparency and produces smaller files, but PNG has universal tool support. JPEG does not support transparency and should never be used as an overlay source. See JPG vs PNG for a full comparison.

How do I make an overlay semi-transparent?

Every method covered here supports opacity control. In ImageMagick, use -dissolve 30 (30% opacity). In CSS, use opacity: 0.3. In Python Pillow 10.2, reduce the alpha channel with ImageEnhance.Brightness(alpha).enhance(0.3). In GIMP 2.10, drag the Opacity slider in the Layers panel. In FFmpeg 6.1, use colorchannelmixer=aa=0.3. The value is always a fraction or percentage — lower means more transparent.

Can I overlay images without installing software?

Yes. CSS overlays work in any browser with no installation. For producing static overlay images without installing desktop software, browser-based tools handle the job. Pixotter processes images entirely in your browser using WebAssembly — your files never leave your device. Convert your images to PNG for transparency support, then composite them using any web-based editor.

How do I overlay a logo on multiple images at once?

Use ImageMagick 7.1 or Python Pillow 10.2 for batch overlays. ImageMagick handles it with a shell loop: for img in *.jpg; do magick composite -dissolve 25 -gravity SouthEast logo.png "$img" "out-$img"; done. Pillow handles it with a Python script that iterates over a directory. Both approaches scale to thousands of images. For preparing images before batch overlay, batch resize them to consistent dimensions first.

Does overlaying degrade image quality?

The overlay operation itself does not degrade quality — it composites pixels mathematically. Quality loss happens at the save step if you export to a lossy format like JPEG. To minimize degradation: work in PNG throughout the compositing process, and only convert to JPEG or WebP at the final export. If your output JPEG is too large, use Pixotter's compressor to optimize it at your chosen quality level.

How do I remove an overlay from an image?

If the overlay was composited and saved as a flattened file (JPEG or flattened PNG), the overlay cannot be cleanly removed — the pixel data is permanently merged. If you saved the project file (GIMP's .xcf, Photoshop's .psd), you can delete or hide the overlay layer and re-export. This is why keeping your original, un-overlaid source images is important.

What is the difference between an overlay and a watermark?

A watermark is a specific type of overlay designed to protect ownership. It is intentionally subtle (low opacity, small size) and placed to deter unauthorized use. An overlay is the general technique — it includes watermarks but also covers logo placement, color tints, gradients, textures, and full image composites. Every watermark is an overlay, but not every overlay is a watermark.

Choosing the Right Method

• One-off overlay, need visual control — GIMP 2.10. Drag layers, adjust manually, export.
• Quick CLI overlay, scriptable — ImageMagick 7.1. One command, done.
• Web page overlay, no static file needed — CSS. Position, blend, ship.
• Batch overlay, hundreds of images — Python Pillow 10.2. Write the script once, run it forever.
• Video overlay or existing FFmpeg pipeline — FFmpeg 6.1. Same tool, same workflow.

Whatever method you choose, start with quality source images. If your base or overlay needs resizing, format conversion, or compression, handle that first — Pixotter's tools process everything in your browser with no upload required. Overlay a clean source, and the result takes care of itself.