Before / After
Drag a divider to compare two images or states side by side. Common for photo editing demos, renovations, and redesign showcases.
Also called: image comparison slider, split reveal
After ✨
Before
Before
After
Click or drag anywhere on the image
How it works
Two layers stacked. The "before" layer uses clip-path: inset(0 X% 0 0) where X is controlled by mouse position. A handle div follows the divider.
- Touch support: use
touchmoveevents too - Libraries: img-comparison-slider, twentytwenty