Before & After Slider Maker (Free)

Before photo Click or drop an image After photo Click or drop an image

Upload both a before and an after photo to preview your interactive slider and unlock the downloads.

Live preview (drag to compare)

Before After

Composite layout:

Heads up: this snippet points to two image URLs, not the photos themselves (embedding full images would make the code huge). Host your before and after photos on your own website or CDN, then paste the links below. The slider code updates automatically.

Before image URL

After image URL

Paste this into any HTML page

Want it built into your site?

We build interactive before/after galleries right into your website so every project sells the next one. Get a free mockup or audit.

Get a free mockup or audit →

Turn your work into proof that sells the next job

Nothing closes a deal faster than seeing the change with your own eyes. This tool takes two photos and gives you two things at once: a clean side-by-side composite PNG for social posts and your Google Business Profile, and an interactive drag-to-compare slider you can drop on your website. No watermark, no signup, and your photos never leave your browser.

How it works

Upload your before photo and your after photo. The live preview lets you drag a handle to wipe between them, exactly how it will feel to a visitor on your site. From there you get two outputs. The composite PNG renders both shots side by side (or stacked) with clear BEFORE and AFTER labels, sized for social. The slider code is a self-contained HTML, CSS, and JavaScript snippet that references two image URLs you host yourself, so the embed stays tiny and fast.

Why it beats the paid options

Canva can build a comparison by hand, but a clean, watermark-free export usually means paying for Canva Pro (around $15/month), and it does not give you an interactive slider for your site. Premium WordPress before/after slider plugins charge a yearly license and lock you into one platform. This tool is purpose-built for trades and contractors, it is free, there is no watermark, and you get both the social composite and the embeddable slider from the same two photos.

Make the comparison honest

The most persuasive before/after photos are also the most truthful ones. Shoot both frames from the same spot, the same distance, and the same time of day so the only thing that changed is the work. Skip heavy filters. An honest comparison builds trust, and trust is what turns a scroll into a phone call.

Pro tips

Use the same angle, framing, and lighting for both shots so they line up cleanly.
Match the shape: two landscape photos or two square photos crop the best.
For your website, host the two images on your own server or CDN, then paste the URLs into the slider code.
Post the composite PNG to Facebook, Instagram, and your Google Business Profile to keep proof flowing.
Build a gallery of these over time, each finished job becomes marketing for the next one.

Frequently asked questions

Are my photos uploaded anywhere?

No. Everything happens in your browser. Your before and after photos are read and combined on your own device, and nothing is sent to a server. When you close the tab the images are gone.

What is the difference between the composite PNG and the slider code?

The composite PNG is a single side-by-side image labeled BEFORE and AFTER, ready to post on Facebook, Instagram, or Google Business Profile. The slider code is an interactive widget you embed on your website where visitors drag a handle to wipe between the two photos.

Why does the slider code use image URLs instead of my actual photos?

Embedding full-resolution photos directly inside HTML makes the snippet enormous and slow. The slider code references two image URLs instead, so you host the photos on your own site or CDN and paste the links. This keeps the page fast and the code easy to manage.

Is there a watermark or signup?

No watermark, no signup, no account. The composite PNG and the slider code are clean and yours to use. Canva often needs a paid plan for a watermark-free export, and most WordPress before/after plugins charge a yearly fee. This tool is free.

What photo sizes work best?

Shoot the before and after from the same angle, distance, and lighting so the comparison is honest. The tool handles any size, but two photos with the same shape (both landscape or both square) line up the cleanest in both the composite and the slider.

Before & after slider maker.