Overlay Slider
Stack two images on top of each other and drag the divider to reveal the differences. Image A is on the left, Image B on the right of the handle.
Click or drag image here
PNG, JPG, WebP, GIF
Click or drag image here
PNG, JPG, WebP, GIF
Drag the canvas or use the range slider to move the divider
How the Overlay Slider Works
Both images are drawn onto a single HTML canvas at the same display dimensions. A vertical divider at the slider position clips Image B so only the portion to its right is visible. Image A fills the entire canvas underneath, so the left of the divider always shows Image A and the right always shows Image B.
You can interact with the divider either by dragging directly on the canvas or by using the range input above it. The canvas is also touch-enabled for mobile devices.
Common Use Cases
Visual Regression
Drag the slider across a baseline and a new screenshot to spot layout shifts, text rendering changes, or missing elements without measuring pixels.
Photo Retouching Review
Smoothly reveal the retouched version over the original to evaluate skin tone adjustments, background removal, or object cloning.
Map / Satellite Imagery
Compare satellite or aerial images captured at different times to identify construction, vegetation changes, or weather events.
Medical Imaging
Slide between two scans of the same region taken at different times to observe progression or regression of regions of interest.