Overlay Images — Put a Logo on a Photo
Put a logo or PNG watermark on a base photo in your browser — not typed text watermark, and not stitching many images like merge. Steps: pick base + overlay, set opacity and scale, position with x/y or drag, choose blend mode, overlay and download JPEG/WebP/PNG. Example: sample photo + semi-transparent LOGO at bottom-right, 75% opacity → PNG — files stay on your device.
How it works
Add a base photo and a second image (logo, badge, or PNG with transparency). Adjust opacity, scale, and position — drag on the preview or type x/y in base pixels. Pick a blend mode, export format, and optional JPEG background, then overlay and download. Everything runs locally; nothing is uploaded.
Drawing rules
The output canvas matches the base image pixel size. The overlay is drawn with its top-left corner at (x, y) after scaling. Blend and opacity apply only while the overlay is painted.
- Canvas width × height = base natural width × height. The base is drawn at (0, 0) filling the canvas.
- Overlay draw size = natural overlay width × height × (scale% ÷ 100). Position uses the top-left anchor in base pixel coordinates.
- globalAlpha = opacity ÷ 100; globalCompositeOperation = selected blend (source-over, multiply, screen, overlay, darken, lighten). Both reset after the overlay draw.
- JPEG export fills the canvas with your background color first to flatten transparent areas, then draws base and overlay. PNG/WebP keep alpha where the base or overlay provides it.
Example
Load sample: a gradient base and a semi-transparent LOGO badge placed bottom-right at 75% opacity with Normal blend. Click Overlay, keep PNG, and download. Drag the badge on the preview to nudge position; try Multiply on a light logo over a photo.
Good fits
- Brand marks: place a logo on product shots or social headers without opening desktop editors.
- Corner badges: add a “NEW” or rating sticker with adjustable opacity and quick nine-grid placement.
- Texture blends: use Multiply or Screen on a grayscale overlay to tint or soften a background photo.
Frequently asked questions
Are my images uploaded?
No. Decode, composite, and export run in your browser. Check the Network panel — files are not POSTed.
How is overlay different from merge?
Merge stitches several photos into one layout (horizontal, vertical, or grid). Overlay keeps one base and paints one layer on top with opacity, position, and blend.
What do the blend modes do?
They follow Canvas composite rules: Normal stacks the layer; Multiply darkens; Screen lightens; Overlay boosts contrast; Darken/Lighten pick min/max channels. Preview updates live.
Why pick a JPEG background color?
JPEG has no transparency. Before export the tool fills the canvas with your chosen color so transparent PNG areas become solid instead of turning black.
Can I type text watermarks here?
This page layers image files only. For typed text watermarks, use the Add Text Watermark tool.
Related tools
Questions or feedback
Something unclear, broken, or missing? Draft a message below — we read every note about these tools.