Uwarp

Click the preview to place the overlay when center options are off.

  • Background — not added yet
  • Overlay — not added yet

Help Us Improve

—

(—)

Overlay images online

Overlay pictures online by placing one photo on another. Use this picture on picture editor with position, scale, rotation, and transparency controls.

What is image overlay?

Image overlay places one picture on top of another while keeping the main canvas size. This page works as an image overlayer and picture on picture editor: upload a main image and a secondary image, position the layer with centering or click placement, optionally scale, rotate, flip, or fade it, and download a single PNG. The main image defines output dimensions, and the secondary composites above it with alpha blending when transparency is enabled.

Image overlay features

Overlay two images and composite a secondary photo on a main image in the browser.

  • Main and secondary uploads

    Output matches main image size; secondary layers on top.

  • Position controls

    Center axes, X/Y sliders, or click the preview to place.

  • Scale and rotate

    Optional resize percent and clockwise or counterclockwise rotation.

  • Flip and transparency

    Mirror the overlay horizontally or vertically; fade with transparency.

  • Live preview

    Composite refreshes when any option changes.

  • PNG download

    Save as overlay-images.png.

How to overlay images

Steps for overlay pictures online.

  1. Upload main and secondary images

    Main sets canvas size; secondary is the layer you place.

  2. Position the overlay

    Center both axes, fine-tune with sliders, or click the output preview.

  3. Tune scale, rotation, or transparency

    Resize for watermarks, rotate stickers, or fade logos.

  4. Download PNG

    Export the blended result for social posts or mockups.

Tips for overlay compositing

Better blended results when you overlay two images.
  • 01

    Use PNG for logos

    Transparent secondary files avoid white boxes around marks.

  • 02

    Scale before rotating

    Set resize first so rotation pivots around the intended size.

  • 03

    Click to rough-in position

    Use the output preview click, then nudge with X/Y sliders.

  • 04

    Uncheck center to free-place

    Horizontal and vertical center locks override click and sliders.

  • 05

    Compare with merge

    Use /merge-images when you need a tall strip or side-by-side panel.

  • 06

    Export PNG

    Preserve transparency on the final composite when needed.

Image Overlay Tools Compared — Which One Fits Your Workflow

How this free image overlay tool stacks up against other popular options.

  1. PineTools.com

    Overlay images with opacity and position controls. Simple but requires Apply button.

  2. Imagy.app

    Image overlay with positioning and blending controls. Feature-packed but complex.

  3. Canva.com

    Full design platform with image overlay/layer support. Requires account; free tier good.

  4. Adobe Express

    Image overlay with blending and opacity. Professional but full suite navigation.

  5. Overlay Images

    Overlay one image on top of another with adjustable opacity and position. Drag to reposition. Real-time preview. All in your browser.

When to overlay images

Typical uses for photo compositing.

  • Watermarks

    Place a logo on photos with transparency and scale.

  • Stickers and badges

    Drop PNG graphics with alpha onto a base shot.

  • Meme templates

    Position a cutout over a background image.

  • Before labels

    Add a small inset image without merging panels.

  • Mockups

    Composite UI screenshots on device frames.

  • Quick blends

    Combine two layers without desktop Photoshop.

Why use this overlay tool

Benefits of browser-based compositing.

  • Layered not stitched

    Secondary sits on the main canvas—unlike side-by-side merge.

  • Private

    Images stay on your device.

  • Free

    Unlimited previews and downloads.

  • Flexible placement

    Center, sliders, and click-to-place on the preview.

  • No install

    Works in modern browsers with Canvas 2D.

  • Honest scope

    One secondary layer per export—not multi-layer PSD editing.

Technical details

How image overlay works here.
Canvas size
Output width and height match the main image upload.
Transforms
Scale, rotate around overlay center, horizontal and vertical flip.
Alpha
globalAlpha from transparency slider; PNG alpha preserved on draw.
Position
Top-left placement with optional center overrides per axis.
Input limits
15 MB per file; longest edge 8192 px.
Browser support
Chromium, Firefox, Safari with Canvas 2D.

Sources & References

Authoritative references on blend modes and image compositing, the Canvas rendering technology this tool uses, and the PNG output format.
  • “Blend modes determine how two layers are blended with each other — also known as compositing modes, blending modes, or transfer modes.”
    — Wikipedia — Blend modes

    Blend modes in digital compositing: This tool overlays a secondary image on top of a main image using alpha blending compositing — applying blend mode concepts to control how layers combine with transparency and positioning. en.wikipedia.org/wiki/Blend_modes

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API (client-side layering): This tool uses Canvas 2D to draw the main image first and the overlay image on top, with globalAlpha for transparency and transforms for positioning, scaling, and rotation — all locally in your browser. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
    — W3C — PNG Specification (overview)

    PNG image format: Downloading the composited overlay as PNG preserves the alpha transparency of the overlay layer and maintains the full quality of both source images. w3.org/TR/PNG/

  • “Digital compositing is the process of digitally assembling multiple images to make a final image, typically for print, motion pictures, or screen display.”
    — Wikipedia — Digital compositing

    Digital compositing techniques: Image overlays stack one image on top of another with opacity control — this tool lets users position and blend a foreground image over a background with adjustable transparency. en.wikipedia.org/wiki/Digital_compositing

Frequently Asked Questions

Quick answers about this tool—open a question to read more.