Before and after image maker
Drop a “before” and an “after” screenshot to get a post-ready comparison: side by side, stacked, or an animated swipe as a GIF or video. Made for “I fixed this bug” and “redesign” posts. Nothing is uploaded.
Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome
More free tools
See all 89 toolsHow it works
- Drop your “before” screenshot on the Before card and your “after” one on the After card. You can also drop both at once (the older file becomes Before), or paste with
Ctrl+V(⌘Von a Mac). Until you do, the preview shows a sample bug fix. - Pick a layout: side by side, stacked, or an animated swipe that wipes from before to after. Then pick where you’ll post it (X, LinkedIn or square), a frame and a background.
- Download it. Side by side and stacked give you a PNG (or “Copy image” to paste it straight into your post). Swipe gives you a GIF or a video.
Questions
Are my screenshots uploaded?
No. Everything is drawn in your browser, including the GIF and the video. Your screenshots never leave your computer.
GIF or video: which should I post?
On X and LinkedIn, the video looks sharper and the file is smaller. Use the GIF for a GitHub README, a pull request, Slack or Notion, where GIFs play on their own.
Why is my video a WebM file?
Chrome and Edge save MP4, which X and LinkedIn accept. Firefox can only record WebM. If your browser gives you WebM, use the GIF instead, or convert the WebM to MP4 before posting.
My two screenshots are different sizes. Is that OK?
Yes. Both are fitted into the same box without cropping, so nothing gets cut off. For the cleanest swipe, take both screenshots of the same window at the same size.
What sizes do the presets make?
X: 1600×900 (16:9). LinkedIn: 1200×627 (1.91:1). Square: 1080×1080. The GIF is made at about 960 pixels wide so it stays small enough to post; the video and PNG use the full size.