collage.tools

Before and After Photo Maker

Overlay two photos and drag the blade line between them. Add labels and callouts to point at specifics.

Before

Drop the “before” photoThey never leave your device

After

Drop the “after” photoThey never leave your device

How to make a before and after photo

  1. Drop the "before" photo, then the "after" photo.
  2. Choose a layout. Split overlays both photos and shows the before on one side of a divider line and the after on the other. Side by side puts the two full photos next to each other.
  3. Drag the divider (split layout) to the spot that shows the change best.
  4. Edit the labels. "Before" and "After" are defaults — "Day 1 / Day 90", "Raw / Edited", or "2019 / 2026" often say more.
  5. Add callouts in split layout to point at specific details, then export as JPG or PNG.

Split line or side by side?

Split lineSide by side
ShowsOne scene, half before / half afterBoth full photos
Best forRetouching, renovations, color grading, cleaning — anything shot from the same spotFitness progress, product versions, anything where the framing differs
CalloutsYesNo — positions wouldn't map onto two separate frames
Output size1600 px tall1600 px tall, twice as wide plus a small gap

A split line only works if both photos line up. If the camera moved between shots, side by side looks more honest than a misaligned split.

Getting a clean match

The split layout reads well when the two photos are framed the same way. For the strongest comparison:

  • Shoot both from the same spot, at the same zoom, ideally from a tripod or a marked position.
  • Match the light: the same time of day, or the same lamps on.
  • Lock exposure and white balance if your camera allows it. Otherwise lighting differences get mistaken for the change itself.

See the before and after photo guide for a full checklist.

Frequently asked questions

Can I make an interactive before/after slider for my website?

The tool's slider is interactive while you edit, but it exports a single still image — the right format for Instagram, marketplaces, and reviews, where embeds don't work. For a live slider on your own site, export both photos at the same size and use an embed library.

Do the before and after photos need to be the same size?

No. Both photos are scaled and center-cropped to a shared frame. They should have roughly the same framing, though, or the split line will look misaligned.

Is it free for commercial use, such as a product listing?

Yes. Exports carry no watermark, and there are no usage restrictions on what you make.

Are the photos uploaded?

No. Both photos stay in your browser and are combined there. Nothing is sent to a server.