How to use the Before & After Photo Maker
- Open the Photos tab and add your “before” picture, then your “after” picture. Use Swap if you picked them in the wrong order.
- Choose a layout in the Layout tab: a vertical or horizontal slider, side by side, or stacked. Pick a size such as square, portrait, pin or landscape.
- Drag the divider in the preview to compare the photos, and use zoom and move in the Photos tab so both pictures line up on the same subject.
- Edit the labels, title, description and brand name in the Text tab. Set colours, padding, corners, border and frame line in the Style tab.
- Check the Desktop and Phone previews, then download a PNG or JPG, or the interactive slider as an .html file.
What does this tool do?
A before and after comparison works when the viewer can tell at a glance what changed. This maker draws both photos with the same framing, so the eye sees the difference rather than a shift in crop or angle.
The slider layouts put the “after” picture under the “before” picture and move a divider across them. The divider you drag in the preview is the one saved in the download, so you can pick the most convincing position. For the web, the .html download keeps the slider draggable.
Side-by-side and stacked layouts show both photos at once, with optional gaps, rounded corners and borders. Eight templates set up the layouts, labels, frame and colours in one click, and every setting can still be changed afterwards.
Everything is drawn in your browser. Your photos are decoded on your device, never uploaded, and are not kept after you close the page. Only your settings are remembered.
How to make a before and after comparison that looks fair
Take both photos from the same distance, angle and light where you can. A comparison looks more honest, and more convincing, when only the thing you want to show has changed.
If the originals differ in framing, use zoom and move to line up a fixed point such as a doorframe, the eyes or a corner of the table. The divider then passes through the same spot in both photos.
Related: Photo Collage Maker · Merge Images
Why use it?
- A real draggable comparison slider, vertical or horizontal, that works with the mouse, touch and arrow keys.
- Slider, side-by-side and stacked layouts, in square, portrait, pin, story, landscape or custom sizes.
- Labels in pill, box, tab or plain styles, placed in the corners or the centre.
- Title, description and brand strip with logo, plus background, border, corner and frame-line controls.
- Zoom, move, rotate and flip each photo so the two line up.
- Download PNG or JPG up to 3×, or a self-contained interactive slider page.
Use cases
- Beauty, skincare and hair transformations.
- Fitness progress and body-change photos.
- Home renovation, decor and cleaning results.
- Photo-editing, retouching and colour-grading showcases.
- Product comparisons, old versus new design and software UI changes.
- Gardening, car detailing and makeover posts.
Which layout should I choose?
Pick the layout by where the result will be shown.
| Layout | Best for | Download |
|---|---|---|
| Slider (vertical divider) | Faces, rooms, products, edits that change a whole scene | PNG/JPG at the divider you chose, or the .html slider |
| Slider (horizontal divider) | Tall subjects and landscapes | PNG/JPG, or the .html slider |
| Side by side | Posts and ads where both photos should be visible | PNG or JPG |
| Stacked | Stories, pins and phone-first designs | PNG or JPG |
Common mistakes
- Different crops or angles that make the change look bigger than it is. Line the photos up first.
- Labels that cover the subject. Move them to a corner or switch to a tab style.
- Posting the PNG when you want a draggable slider. Use the .html download or a slider widget on your own site.
- Very large exports from small originals. A 3× download of a small photo is larger, not sharper.
- Putting the divider at the extreme edge so only one photo shows. Leave it near the middle for the preview image.
Accuracy and limits
- The pictures shown on first load are generated samples, not photographs. Downloads are blocked until you add both of your own photos.
- This tool arranges your photos; it does not retouch, enhance or verify them. Present results honestly, and follow platform and advertising rules for before and after claims.
- The saved PNG or JPG is a still image with the divider where you left it. Only the .html download is interactive.
- Photos are not stored between visits. Reloading the page clears them, so download your work first.
- Very large sizes are scaled down so the export stays within what a browser can draw (about 16 million pixels).
Privacy
Your files are processed entirely in your browser using built-in web technologies. They are not uploaded to our servers, and closing the page clears them from memory. There's no account to create and nothing to install.
Frequently asked questions
Is this before and after photo maker free?
Yes. Every layout, template and download is free, with no account and no watermark.
Does the comparison slider really work?
Yes. Drag the divider with the mouse or your finger, or focus it and press the arrow keys. It shows your uploaded photos, not placeholders.
Can I download the slider itself?
Yes. Choose “Interactive slider (.html)” to get one file that works offline in any browser, with both photos inside it.
Can I place the photos side by side instead?
Yes. Choose Side by side or Stacked in the Layout tab. You can set the gap, corners and borders.
Can I add a title, labels and my brand?
Yes. Edit the Before and After labels, a title and description, and a brand name with an optional logo in the Text tab.
How do I line up two photos taken at slightly different angles?
Use zoom and move for each photo in the Photos tab, and copy the crop from one to the other if they share a framing.
Which file types can I upload?
JPG, PNG, WebP and other formats your browser can open. Phone photos are rotated using their camera orientation.
Are my photos uploaded?
No. Everything happens in your browser, and photos are not kept after you close the page.
Can I use it on my phone?
Yes. The controls stack above the preview on small screens, and there is a Phone preview to check how it will look.
Last reviewed by the M2Toolkit team.