The Before After Slider lets you compare two images by dragging a divider to reveal them side by side. Perfect for showcasing photo retouching, design iterations, landscape restorations, and product comparisons.
Before Image
After Image
Keyboard: Arrow keys move the slider. Tab to focus the slider area.
Drag the divider handle to compare images
How to Use the Before After Slider
The Before After Slider creates an interactive comparison between two images using a draggable divider. It's a staple tool for photographers, designers, and content creators who want to showcase the impact of their work — whether that's photo editing, UI redesigns, or real estate staging.
Step 1: Upload Your Images
Click the "Before" and "After" upload areas to select your images. The tool supports JPEG, PNG, WebP, and other common formats. For the best visual result, use images of the same dimensions. If they differ, the tool will display them at the same width, which may cause slight vertical misalignment.
Step 2: Choose Orientation
The default vertical mode places a left/right divider — ideal for most comparisons. Toggle to horizontal mode for top/bottom comparisons, which works well for sky replacements, horizon adjustments, or before/after where the difference is primarily in the upper or lower portion of the image.
Step 3: Load and Interact
Click "Load Comparison" to display the interactive slider. Drag the center handle left and right (or up and down in horizontal mode) to reveal the before and after images. The Before and After labels are always visible so viewers know which side is which.
Step 4: Keyboard Accessibility
Click on the comparison area and use the arrow keys to move the slider in precise increments. Left/right arrows move 2% in vertical mode; up/down arrows move 2% in horizontal mode. This makes the tool usable without a mouse and accessible to keyboard-only users.
Step 5: Download the Comparison
Click "Download" to save a side-by-side PNG showing both images at equal size with "Before" and "After" labels. This static export is useful for blog posts, social media, or presentations where an interactive slider isn't available.
FAQ
Is the Before After Slider free?
Yes, completely free with no account required. All image processing happens in your browser — your images are never uploaded to any server.
Are my images private?
Yes. The tool runs entirely in client-side JavaScript. Your images never leave your device and are not stored anywhere.
What image formats are supported?
Any format your browser supports: JPEG, PNG, WebP, GIF, and BMP. Both images should ideally be the same dimensions for best visual comparison.
Can I use touch to drag the slider on mobile?
Yes. The slider supports both mouse drag on desktop and touch drag on mobile devices. Simply touch and drag the divider handle to reveal the before or after image.
What is vertical vs horizontal slider mode?
Vertical mode (default) places a vertical divider that you drag left and right to reveal the images horizontally. Horizontal mode places a horizontal divider that you drag up and down — useful for comparing top/bottom differences like sky replacements.
Can I download the comparison image?
Yes. Click 'Download Comparison' to save a side-by-side PNG showing both images at equal width with 'Before' and 'After' labels.