Before & After Image Creator
Controls
Upload two images, choose side by side or stacked layout, set a preset or custom output size, edit labels and label position, choose a solid, transparent, or gradient background, and download the before and after image. No registration is required.
How to Create a Before & After Image
- Click "Select 2 Images" and pick two photos (before and after)
- Adjust the output size using presets or custom dimensions
- Edit the "Before" and "After" labels or remove them entirely
- Choose a background color: white, black, transparent, or any custom shade
- Switch between side-by-side or stacked layout
- Click "Download Image" to save the final composition
Key Features
Two Layouts
Place your images side by side (horizontal) or stacked on top of each other (vertical).
Custom Output Size
Set exact pixel dimensions or choose from popular presets like 1080×1080, 1920×1080, or 1200×630.
Flexible Backgrounds
Use white, black, transparent, or any custom color for the background.
Custom Labels
Change "Before" and "After" text, adjust font size and color, or hide labels completely.
Frequently Asked Questions
A before and after image places two related pictures into one comparison layout so the visual change is easy to understand at a glance. It is commonly used for edits, transformations, renovations, fitness progress, product improvements, retouching comparisons, and any project where you want to show a clear visual difference between two states.
For Instagram, 1080x1080 is a strong default for square posts, while taller portrait-style layouts often work better around 1080x1350. The included 1080x1080 preset is useful for quick social posting, but you can also enter custom dimensions when another layout fits your content better.
Yes. You can type any text you want into the label fields, such as "Old / New", "Day 1 / Day 90", "Original / Edited", or another language entirely. You can also hide the labels if you want the comparison image to look cleaner or more visual-only.
When you select a transparent background, the empty canvas area behind and around the images is kept transparent instead of being filled with a solid color. The file downloads as a PNG with alpha transparency, and the checkerboard pattern in the preview helps you see which areas will remain transparent in the final result.
No. Everything runs locally in your browser using the HTML5 Canvas API, so your images never leave your device while the before-and-after composition is created and downloaded.
If the two images have different sizes or proportions, each one is automatically scaled and cropped to fill its half of the canvas using a cover-style fit. That keeps the final layout clean and balanced, even when the source files do not match in size or orientation.