Before After Slider - Compare Two Images on the Web

Before After Slider for Side-by-Side Image Comparison

The Before After Slider is an interactive image comparison tool that reveals exactly what changed between two pictures. Upload a "before" and an "after" image, then drag the handle across the slider to wipe from one to the other in real time.

It is built for anyone who needs to show a transformation: photographers presenting retouching and color grades, designers comparing old and new layouts, and anyone documenting restoration or product enhancements. You can compare horizontally or vertically, rename the labels, and download the finished comparison as a PNG.

Private by design: every image is loaded and processed in your browser. Your photos are never uploaded to a server, stored, or tracked — the comparison and the PNG export are generated entirely on your device.

How to Make a Before After Slider

Add your two images

You will see two zones, Before and After. Click a zone to open the file picker, or drag and drop an image straight onto it. A thumbnail preview appears once an image loads; use the Remove button to swap it for a different one.

Start comparing

With both images in place, click Compare. The slider view opens with the images stacked, and you drag the handle to reveal each side. Click anywhere on the image to jump the divider to that point.

Customize the comparison

Switch between Horizontal and Vertical orientation, use Swap images to exchange the two sides, and type your own text into the label inputs (for example "Original" and "Retouched").

Download or start over

Click Download to save a PNG that captures the current divider position, the white divider line, and both labels. To begin a fresh pair, use New comparison to return to the upload screen.

Keyboard control: focus the slider and use the arrow keys to nudge it 2% per press, or hold Shift for 10% steps. In horizontal mode use Left and Right; in vertical mode use Up and Down.

Features

Drag-and-Drop Upload

Add the before and after images by dropping them onto the upload zones or clicking to browse. Common formats such as JPEG, PNG, and WebP are supported.

Interactive Draggable Slider

A smooth divider responds to mouse, touch, pen, and keyboard. Drag the handle or click anywhere on the image and the reveal updates instantly.

Horizontal & Vertical Modes

Split the comparison left-to-right for landscapes or top-to-bottom for tall, portrait images. Switching orientation recenters the slider.

Swap Images

Exchange the before and after images with one click. The labels swap along with them so the comparison stays consistent.

Custom Labels

Replace the default "Before" and "After" text with your own — like "Original" and "Enhanced" — and the overlay updates as you type.

Download as PNG

Export the comparison at the before image's full resolution, with the divider line and labels baked in at the current slider position.

Keyboard Navigation

Move the divider precisely with the arrow keys (2% per step), and hold Shift for larger 10% jumps.

Touch & Mobile Friendly

The slider works with finger gestures on phones and tablets, and the interface adapts to smaller screens.

Accessible Controls

The slider exposes proper ARIA attributes and a focusable role for keyboard and screen-reader users.

Runs Entirely In-Browser

Images are processed locally and never sent to a server, so your comparisons stay private and load instantly.

Frequently Asked Questions

How do I make a before after slider?

Upload one image to the Before zone and another to the After zone, then click Compare. Drag the handle across the slider to reveal each image. You can switch orientation, edit the labels, and download the result — no account or install required.

How do I compare two images side by side?

After both images are loaded and you click Compare, the two pictures are stacked and a divider wipes between them. Drag the handle left and right (or up and down in vertical mode) to expose more of one image versus the other and see exactly what changed.

What image formats are supported?

Any image format your browser can display works, including JPEG, PNG, WebP, GIF, and BMP. For the cleanest comparison, JPEG or PNG are recommended.

Do my images need to be the same size?

No, but matching dimensions give the best result. If the two images differ in size, the after image is scaled to fill the before image's display area so the slider still lines up.

Can I export or download the before after image?

Yes. The Download button saves a PNG at the original resolution of the before image. It captures the current divider position along with the white divider line and both labels, ready to share or drop into a presentation.

Are my images uploaded to a server?

No. All processing happens entirely in your browser. Your images never leave your device, and nothing is stored or tracked.

Does it work on mobile?

Yes. The slider supports touch gestures, so you can drag the divider with your finger just like on desktop, and the layout adapts to phone and tablet screens.

What is vertical mode for?

Vertical mode splits the comparison top-to-bottom instead of left-to-right. It is ideal for tall or portrait-oriented images, where a horizontal split would not reveal the differences clearly.