This is a code generator: design a draggable before/after comparison slider component here, then copy a standalone HTML, CSS and JS snippet to embed on your own website with your own two images.
This preview is fully interactive so you can confirm the mechanic before you copy the code.
Uses the Pointer Events API, clamped between 0% and 100%, for mouse, touch and pen alike.
Line-only, circle with arrows, or circle with a chevron — themed with one color variable.
Copy self-contained HTML, CSS and JS with clear comments on where your images go.
A comparison slider is a small interactive widget that reveals one image as the user drags a handle over another, commonly used for photo edits, redesigns, product renders or time-lapse comparisons. Building one from scratch means wiring up pointer or touch events, clamping the position between 0% and 100%, and updating a clip-path or width so the reveal tracks the handle smoothly. This generator produces exactly that: a small, dependency-free component using CSS custom properties for color and sizing, so it's simple to theme and safe to drop into an existing page without style conflicts. The placeholder panels here use gradients purely so you can see the mechanic clearly — in your own project you'll replace them with two real images of the same size.
The generated JS updates a clip-path inset on the top panel as the handle moves, which is smoother than resizing width in most browsers.
One event model (pointerdown/pointermove/pointerup) covers mouse, touch and pen input without separate touch-specific code.
The handle position is always clamped, so fast drags or edge clicks can't push it outside the widget.
Handle color and divider width are exposed as CSS variables in the snippet, making retheming a one-line change.
This tool generates a reusable, standalone HTML, CSS and JS code snippet for a before/after comparison slider component, meant to be pasted into your own website with your own two images.
Swap the two placeholder panel divs' background styles for your own img tags, exactly as noted in the code comment included in the export.
Yes. The generated JS uses the Pointer Events API, which covers mouse, touch and pen input with a single set of event listeners.
Yes. Handle color, divider line width, handle style, starting position and corner radius are all configurable and exposed as CSS custom properties in the output.
Continue building media and hover components with these free tools.