Loading...
Loading...
Drop in two images and reveal the difference with a draggable divider, lay them out side-by-side, or fade one over the other — useful for design reviews, retouch passes, and before/after photography.
An image compare slider lets you put two images on top of each other and reveal one or the other by dragging a divider across the frame. It's the standard tool for any 'before vs. after' visual: photo retouching passes, redesigns of a UI, two renders of the same scene, two color grades of the same shot, build A vs. build B of a 3D model. Side-by-side mode shows both at once for proportion comparisons. Fade overlay mode tweens between the two with an opacity slider, which is useful for spotting subtle alignment shifts or tone differences a hard divider would hide. Everything happens locally — both images stay on your device, the comparison renders in the browser, and nothing is uploaded.
Drop a JPG, PNG, WebP, GIF, BMP, or AVIF file into the Before slot, or click to pick from your device. The image renders in the panel and the workspace appears below.
Drop the second image into the After slot. For best results both images should have the same dimensions — the comparison container locks to the aspect ratio of the first image you load.
Slider lays the two images on top of each other with a draggable divider. Side by side puts them in two columns. Fade overlay tweens between them with an opacity slider — useful for spotting alignment drift.
In slider mode, drag anywhere in the comparison area to move the divider. Switch the divider to vertical if your images compare top-to-bottom rather than left-to-right. In fade mode, drag the After opacity slider.
Use Swap to flip A and B without re-uploading. Reset clears both images and returns the workspace to defaults. Load new files anytime by dropping them on the slot — no need to reset first.
1. Both images render at object-fit: contain inside an aspect-locked container. 2. The After image sits in an absolutely-positioned overlay. 3. A CSS clip-path: inset(0 [100 - position]% 0 0) reveals only the left side of the overlay. 4. Vertical mode swaps the inset axis: clip-path: inset(0 0 [100 - position]% 0). 5. Pointer events update position from the cursor's offset within the container's bounding rect. 6. Fade mode skips the clip-path and just animates opacity from 0 to 1 on the After image.
Using clip-path keeps both images at full quality with no canvas re-encoding — what you see is the source file pixel-for-pixel, just masked. Drag handling captures pointermove on the window so the divider keeps tracking even if the cursor leaves the comparison area mid-drag. The aspect-ratio lock means the container scales with the page width without ever distorting the images, and object-fit: contain gracefully handles the case where the two images have slightly different dimensions.
Reference: MDN — clip-path
| Use case | Best mode |
|---|---|
Photo retouching pass (skin, sky replacement, color grade) | Slider — drag the divider across the frame to spot exactly where edits land. Keep both files at the same dimensions so the divider line stays meaningful. |
Web redesign — old layout vs. new layout screenshots | Slider for hero sections, side-by-side when scrolling matters. Take both screenshots at the same viewport width or the comparison won't be apples-to-apples. |
Two renders of the same 3D scene with different lighting | Fade overlay — tween between them to spot subtle GI or shadow drift. Fade mode is also great for spotting where a denoiser changed detail. |
Bug-report screenshot vs. expected output | Side by side — engineers can see both at once without scrubbing. Add the slider on top in the issue thread for the 'reveal' moment. |
Map or chart with two data states (March vs. April) | Slider — sweep across the chart to see which regions changed. Vertical divider works well for geo maps that compare north vs. south. |
Cut out the subject from any photo with on-device AI — no upload required.
Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.
Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.
Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.
Last updated: