Before and after image slider builder

How to use the before and after slider builder

1. Add two images. Drop in the before and after versions. They should be the same size and framing, such as two exports of the same design or a photo before and after editing. A sample pair is loaded first.
2. Try the slider. Drag across the preview, or click it and use the arrow keys. Choose a left–right or top–bottom split and where the handle starts.
3. Style it. Turn the labels on or off and rename them, then set the handle colour and corner radius.
4. Copy the code. Copy the HTML, CSS and short script, then change before.jpg and after.jpg to your image paths. Or download a standalone demo page with the images embedded.

How the slider works

Both images sit in the same grid cell, one on top of the other. The after image is trimmed with clip-path: inset(), controlled by a CSS custom property. An invisible, full-size range input sits on top: dragging it updates the property, so the browser does all the work and the script is only three lines long.

Built to be accessible

Because the control is a real <input type="range">, it works with a mouse, touch and the keyboard out of the box, shows a focus ring, and is announced by screen readers with a clear label. Both images have alt text, and the labels are hidden from assistive technology so they aren’t read twice.

Good uses

Before-and-after sliders are ideal for showing a website redesign, photo retouching, image compression quality, colour grading, renovation projects and dark versus light themes. Use images with identical dimensions and alignment, or the comparison will jump as you drag.

Frequently asked questions