Before/After Slider Generator

Upload a before and after photo, drag to compare, export one self-contained file to paste into your site — no plugin, no account, no hosted widget to keep alive.

Drop in a before photo and an after photo, drag the divider to preview the comparison, then generate a single downloadable HTML file with both images baked in as data URIs — no external script, no CDN call, no account. Paste it into a portfolio page or open it on its own; it works exactly the same either way, forever, with nothing to keep hosted on your end or ours. One-time purchase.

What it does

What it does: Two photos are laid over each other in the browser; a CSS clip-path on the top ("after") image is updated live as you drag a divider handle (mouse, touch, or arrow keys), revealing more of one photo or the other. When you're happy with it, "Generate export" re-encodes both photos (capped at 1600px on the longest edge, JPEG quality ~0.85, to keep the output file a reasonable size) and builds a complete, minimal standalone HTML file with the same drag-and-keyboard slider, both images embedded directly in the file — nothing to link to, nothing to keep online.

Who it's for: A photo retoucher or contractor who wants to show a raw-vs-edited or before-vs-after result on their own portfolio page and doesn't want to install a WordPress plugin, sign up for a hosted widget account, or write the CSS/JS themselves. The clearest case: a wedding or portrait retoucher finishes editing a client photo and wants an interactive comparison on their portfolio site — more convincing than two static side-by-side images, without adding a page-builder dependency to their site.

Example scenario: A retoucher finishes a portrait edit, drops the raw and retouched JPEGs into the tool, drags the divider to confirm it looks right at a few positions, clicks Generate, and pastes the exported HTML's contents into their static portfolio page (or hands the standalone .html file to a client directly). It works identically whether it's embedded in a page or opened on its own — because it's not calling out to anything.

What it explicitly does not do:

• Does not host or serve the exported file for you — you paste the generated markup into your own page or distribute the .html file yourself.
• Does not touch more than two images at a time — this is a single-comparison tool, not a batch/gallery builder.
• Does not preserve full original resolution in the exported file — both images are capped at 1600px on the longest edge and re-encoded as JPEG to keep the exported file a sane size; the on-screen comparison in the generator itself always uses your full-resolution originals.
• Does not auto-correct mismatched aspect ratios — if your two photos have different proportions, both are center-cropped to the before photo's frame (via object-fit: cover) and the tool tells you this happened; it doesn't attempt to reframe or letterbox for you.
• Does not theme-match the host page automatically — the exported snippet uses a small, fixed, neutral look (a dark frame, a white handle) rather than following the visitor's OS light/dark preference, because it's meant to sit inside someone else's page design, not carry its own adaptive theme (see Phase 4 notes below for the reasoning).

Features

• Drag-to-compare slider with a visible grip handle — works with mouse, touch, and arrow keys once the handle is focused
• One-click export to a single self-contained HTML file with both photos embedded as data URIs — genuinely zero external scripts, fonts, or CDN calls in the output, verified by inspecting the exported file directly
• Exported file opens and works standalone — tested in a fresh browser tab with no connection to the generator page
• Automatically warns you when your two photos have different aspect ratios, and explains exactly how the mismatch is handled (center-crop to the before photo's frame)
• Exported images are auto-capped at 1600px on the longest edge and re-encoded to keep the output file small, even from full-resolution camera originals
• Runs entirely offline in your browser — no uploads, no analytics, no account, nothing to keep hosted

Browser support

Functional testing covered: uploading via drag-and-drop-equivalent file selection, dragging the divider to multiple positions and confirming the `clip-path` value matches, keyboard control of the divider (arrows, Home, End, Page Up/Down), the aspect-ratio-mismatch warning triggering on genuinely mismatched test photos, swap/remove/change-images controls, wrong-file-type / empty-file / corrupted-file error states, a large-file performance pass, light and dark mode (via color-scheme emulation), and — critically — opening the exported standalone file in a completely fresh browser context with no relation to the generator page, dragging it, and using its keyboard control, confirming it genuinely works with zero dependency on the generator itself. All of this was run through each engine's real automation, not inferred from reading the code.

FAQ

Does my file get uploaded anywhere?
No. The entire tool is one static HTML file with no server component and no network calls — you can open it with your Wi-Fi off. The exported comparison file works the same way: open the source and you'll find two `` tags with `data:` URIs and a small inline script, nothing else.

Does this work on my iPhone/iPad?
The exported comparison file uses only standard, widely-supported browser APIs (Pointer Events, CSS `clip-path`), so it's very likely to work in iOS Safari — but this hasn't been tested on a physical iOS device, so it isn't claimed as verified. The generator tool itself is a desktop-oriented two-column upload flow; using it on a phone hasn't been tested either.

What happens to my file if I lose the download?
Nothing is stored by the tool — your original photos are untouched on your computer the whole time. Just re-upload them and click Generate again. If you reload the generator page before exporting, you'll need to re-add both photos; nothing is kept in memory across a reload.

Can I use this for client or commercial work?
Yes — personal and commercial use are both fine, including client deliverables and portfolio work.

Is there a subscription?
No. One-time purchase, yours to keep and reuse forever, with no view caps and no branding added to what you export.

Can I resize the exported comparison after the fact?
The exported file is responsive — it fills whatever width you give it in your page's CSS, scaling the image inside proportionally. You can't change which two photos it contains without going back to the generator and creating a new export.