Before/after slider generator
Create an interactive comparison slider between two images (before/after) directly in your browser, preview it live, then grab the HTML/CSS code to embed on your own site.
How it works
The “after” image is displayed at full size in the background, while the “before” image is overlaid on top in a container whose width is controlled by an invisible slider: by dragging this slider, you progressively reveal the underneath image. The preview above works directly in the tool, and the generated code reproduces the same principle in pure HTML/CSS, without any external JavaScript dependency.
How do I integrate the generated code into my site?
Copy the generated HTML code and replace the two src attributes with the real paths of your images (hosted on your server) or with their full base64-encoded versions; the native input[type=range] slider included in the code handles interactivity without any additional library.
Can I change the “before” and “after” labels?
Yes, the label fields let you customize the text displayed in each corner of the slider (for example “Before renovation” / “After renovation”, or dates), both in the preview and in the generated code.
Preview and code generation are done entirely in your browser: your images are never sent to a server.