Your files never leave your device. All processing happens in your browser.
Drop your before photo and your after photo on the Img Stop Before After Image Slider Maker. Drag the line to check the result, set labels, line colour and handle, then choose what you need: a side-by-side image, an animated GIF or MP4 of the slider moving, a still frame, or HTML embed code for your website.
About the Before After Image Slider Maker
The Img Stop Before After Image Slider Maker turns two photos into an interactive comparison slider. Both images are made the same size for you – crop to fill, fit with bars or stretch – so the line lines up perfectly. You can drag it with a mouse or a finger, left and right or top and bottom.
When it looks right, download the result in the form you need. A side-by-side or top-and-bottom image works on any website or marketplace. A GIF or MP4 of the slider sweeping back and forth is great for Instagram, TikTok, ads and email. The embed code is a small, self-contained HTML, CSS and JavaScript snippet that works in any web page, with your own image links or with the images built in. Everything happens in your browser, so your photos are never uploaded.
Key features
- Live slider previewDrag, swipe or use the arrow keys to compare the two photos.
- Same size, automaticallyCrop to fill, fit with bars in any colour, or stretch – based on the before or the after image.
- Labels and stylingEdit the Before and After text, label position and size, line colour, line width and handle style.
- Animated GIF and MP4The slider sweeps back and forth by itself. Choose the size and speed.
- Side-by-side imageBoth photos next to each other or one above the other, with labels and an optional gap.
- Copy-paste embed codeA self-contained HTML, CSS and JS snippet – replace two image links or keep the images inside the code.
How to use the Before After Image Slider Maker
- Add two photos Drop the before image first and the after image second. You can swap or replace them at any time.
- Adjust the slider Choose crop, fit or stretch, the direction, labels, line colour, line width and handle.
- Pick an output Choose a side-by-side image, GIF, MP4, still frame or embed code.
- Download or copy Click the button to download the file, or copy the code and paste it into your page.
Before After Image Slider Maker at a glance
| Price | Free |
|---|---|
| Input | JPG, PNG, WebP and other images |
| Output | JPG, PNG, WebP, GIF, MP4, HTML code |
| Directions | Left / right or top / bottom |
| Video size | Up to 1920 px wide |
| Privacy | Made in your browser – no upload |
When to use it
- Show photo editing, retouching or colour grading results.
- Compare a room, garden, car or house before and after renovation or cleaning.
- Show skin care, dental, hair or fitness results (with permission).
- Add a before and after slider to a WordPress, Shopify or Wix page.
- Make a short before and after video for Instagram Reels, TikTok or ads.
Tips for the best result
- Take both photos from the same spot, with the same zoom and light – the slider looks much better when things line up.
- Use “Fit (add bars)” if you don't want any part of the photos cut off.
- For websites, the “My own image links” embed is lighter and faster than images built into the code.
- Use a GIF for chats and emails; use MP4 for Instagram, TikTok and Facebook, which don't play GIFs well.
Frequently asked questions
How do I make a before and after slider?
Add your before photo and your after photo, adjust the labels and line, and choose an output. The tool makes both photos the same size so the slider lines up, and you can drag it in the preview to check the result.
How do I add a before and after slider to my website?
Choose “Embed code”, click Get embed code and copy it. Upload your two images to your site and replace BEFORE-IMAGE.jpg and AFTER-IMAGE.jpg with their links. Paste the code into an HTML block, for example a WordPress “Custom HTML” block. The code needs no plugin or library.
Can I make a before and after GIF or video?
Yes. Choose GIF or MP4 and the tool records the slider sweeping from one side to the other and back. You can choose the width and how long one sweep takes. If your browser cannot make MP4 files, you get a WebM video instead.
What if my two photos are different sizes?
The tool resizes them to the same size. “Crop to fill” cuts the edges, “Fit (add bars)” keeps the whole photo and adds bars in a colour you choose, and “Stretch” changes the shape. You can use the size of the before or the after image.
Does the slider work on phones?
Yes. The preview and the embed code both work with touch – swipe the line with your finger. The embed code also works with the keyboard arrow keys.
Are my photos uploaded?
No. The slider, GIF, video and code are all made inside your browser on your own device.
Learn more
- Google Search: Image SEO best practices – make your edited images easy to find
Made and maintained by the Img Stop team.