Free business generator

Before and After Slider Embed

Turn two safe image links into a responsive, keyboard-friendly comparison slider for any website.

Instant results
Private in your browser
PDF report included

Ready to use

Review and make it yours

Edit the draft before publishing or sending it. Your changes stay on this device unless you copy or download them.

Copy-ready draft

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Treatment result comparison</title><style>*{box-sizing:border-box}body{margin:0;padding:24px;background:#f5f4f0;font-family:system-ui}.compare{--split:50%;position:relative;overflow:hidden;max-width:960px;height:520px;margin:auto;border-radius:22px;background:#ddd}.compare img{position:absolute;width:100%;height:100%;object-fit:cover}.after{clip-path:inset(0 0 0 var(--split))}.labels{position:absolute;inset:16px;display:flex;justify-content:space-between;pointer-events:none}.labels span{padding:7px 11px;border-radius:999px;background:#111c;color:#fff;font-weight:700}.slider{position:absolute;inset:auto 20px 20px;width:calc(100% - 40px)}</style><figure class="compare" id="compare"><img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429" alt="Treatment result comparison: Before"><img class="after" src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e" alt="Treatment result comparison: After"><figcaption class="labels"><span>Before</span><span>After</span></figcaption><input class="slider" type="range" min="0" max="100" value="50" aria-label="Show more of the After image"></figure><script>const box=document.querySelector('#compare'),slider=box.querySelector('.slider');slider.addEventListener('input',()=>box.style.setProperty('--split',slider.value+'%'))</script></html>

44 words · 1440 characters

Use the result well

A clear answer, with the assumptions visible

These recommendations turn the result into an operational next step without hiding the inputs behind a score.

1
Use images with matching dimensions and camera position.
2
Describe the comparison clearly in the image description.
3
Get permission before publishing identifiable client photos.

How this tool works

Allow HTTPS image destinations only.
Layer the images with a range input as the accessible control.
Create dependency-free HTML, CSS, and JavaScript for embedding.

Build it in Bookify

Give every visitor a next step

Connect your page, offer, and booking link in Bookify.

Create a booking page

A clear answer, with the assumptions visible

How this tool works

Give every visitor a next step

Related free tools