DeskTray

Image Comparison Slider

Show the difference between two photos with a slider you can drag. Great for edits, renovations, skin care results and design changes.

Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile
Before
Choose the before image
or drag and drop here
After
Choose the after image
or drag and drop here

How to make a before and after slider

  1. Choose the before image and the after image.
  2. Drag the divider, pick left-right or top-bottom, and edit the labels.
  3. Download a side-by-side picture or an HTML file with the slider.

Features

  • Drag the divider with a mouse or finger
  • Left ↔ right or top ↕ bottom divider
  • Keyboard support with arrow keys, Home and End
  • Side-by-side or stacked JPG download
  • Self-contained HTML slider to share or embed

Frequently asked questions

How do I put the slider on my website?

Download the HTML file. Both images are embedded inside it, so you can open it in any browser, send it, or paste its contents into your site. It needs no other files or libraries.

What if my two photos are different sizes?

The first photo sets the shape. The second is scaled and cropped from the centre to match, so the divider lines up across both.

Can I use it without a mouse?

Yes. Press Tab to focus the round handle, then use the arrow keys. Hold Shift for bigger steps, and press Home or End to jump to either side.

Are my photos uploaded?

No. Everything happens in your browser, so your photos never leave your phone or computer.

Related tools

All Image Tools →