EspañolBefore and after slider for websites
Paste the URLs of the two photos (same size and framing). Drag the divider in the preview and copy the code.
How to useBefore and after with a draggable divider
Available in: 
Before and after slider for websites: what it is for
For services that change how something looks, such as barbershops, auto detailing, renovation or cleaning, showing the before and after in the same photo is more convincing than any text.
Paste the two photos and the generator builds the comparison with a divider you drag with a finger or mouse, labels, a starting position and a color. Underneath, the divider is a range input, so it works with the arrow keys and is announced by screen readers; the cropping is done with clip-path, with no library.
How to use
- Paste the URLs of the before and after photos.
- Write the labels, the description and the starting position.
- Copy the code and paste it into your page.
When to use it
- Barbershops and beauty salons.
- Auto detailing and body shops.
- Renovation, painting and cleaning.
Frequently asked questions
Which businesses is it for?
Any service that changes how something looks: barbershops, salons, auto detailing, renovation, painting, upholstery cleaning, cosmetic dentistry, landscaping. Seeing the difference in the same photo is more convincing than two separate photos.
How is it accessible?
The divider is a real range input underneath: you can move it with the arrow keys, and screen readers announce the percentage. Both photos have alt text.
Do the photos have to be identical?
They need the same aspect ratio and, ideally, the same framing, taken from the same spot. If the proportions differ, the top photo is cropped to fit (object-fit: cover).
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.