Frame it
Add a background, padding, corner radius, and shadow.
Free · no watermark · local export
Create a before-and-after GIF
Frame the screenshots, point out the change, choose an animation, then download it or share an unlisted link.
1 · Add screenshots
Add two screenshots
BeforeOriginal screenshot
AfterChanged screenshot
Images and GIF frames stay inside this browser tab.
How it works
Style, annotate, and animate two screenshots.
Point to it
Highlight a changed area or add an annotation.
Animate it
Choose a transition and export the GIF locally.
Questions
Before-and-after GIF FAQ
Does the GIF maker upload my screenshots?
Not unless you choose Share. Styling and GIF encoding happen in your browser; Share uploads only the finished GIF to an unlisted link. Closing the tab clears the working screenshots.
How does automatic change highlighting work?
The tool compares the two screenshots, groups nearby changed pixels, and places a highlight around the largest detected region. You can also add your own arrows, boxes, circles, labels, and highlights.
Why can a GIF look less detailed than the screenshots?
GIF supports a maximum of 256 colors per frame. The high-quality size preserves more pixels, while flat interface screenshots usually compress more cleanly than photographs.
Which animation is best for website changes?
Spotlight highlights one area, crossfade transitions gradually, slider reveal preserves context, and blink makes small layout shifts easier to notice.