OneTaskBy Tim King · Updated
Before After Slider
Image Comparison Slider in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Before / After Slider works
A before after slider stacks two images and lets visitors drag a handle across to reveal one over the other. Paste the URLs of your two images, set the labels and starting position, and copy the HTML, CSS and a three-line script.
Before and after sliders show a change more clearly than two images side by side, because the eye compares the exact same spot. They suit renovations, photo retouching, cleaning and landscaping services, skincare results and redesigns.
How the before after slider works
Both images fill the same box. The after image is trimmed with clip-path: inset() using a CSS
variable for the left edge, so only the part to the right of the handle shows. An invisible range
input covers the whole slider, and dragging it updates the variable. Because it is a real range
input, it works with touch and mouse, and keyboard users can tab to it and use the arrow keys.
Images
Use two images of exactly the same size and framing, or the change will look like a jump rather
than a reveal. The images use object-fit: cover to fill the chosen aspect ratio, so crop them to
that ratio first for the best result. Write alt text that describes each state.
FAQ
Why is the slider a range input?
A range input gives you dragging, touch support, keyboard arrows and screen reader announcements for free. A custom drag handler would need all of that written by hand and is easy to get wrong.
Can I use it without JavaScript?
The images and labels still show, but the handle will not move. The script is only three lines and just copies the range value into a CSS variable.
Can the slider be vertical?
Yes. Change the clip to inset(var(--pos) 0 0 0), move the handle with top instead of left,
and rotate the range input or use writing-mode: vertical-lr on it.
Why do my images not line up?
The two photos must share the same size, crop and camera position. Align and crop them to the same dimensions in an image editor before uploading.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Card Builder
Design a card component and copy its HTML and CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Pricing Table Builder
Build a responsive pricing table of plans with a featured one.