Before & After — Free Social Proof Social Post Template
Social Proof · v1.0.0 · Updated 2026-10-16 · Instagram, Facebook & X · HTML + CSS
What's included
Features
About this template
Before & After — Free Before and After Comparison Post Template
Before & After is a free comparison post template for showing transformations: website redesigns, renovations, fitness progress, cleaning results and photo edits. A results headline sits at the top, two photo panels labelled "Before" and "After" fill the post, and your handle sits at the bottom.
The layout adapts to the size
On tall sizes (4:5 portrait and 9:16 Story) the panels stack top and bottom, so each image stays as wide as possible. On square and 16:9 landscape sizes they sit side by side. The layout uses CSS grid, so both panels are always exactly the same size, which keeps the comparison fair.
Labels that read instantly
Each panel has a pill label in the top-left corner. "Before" is a translucent dark pill, and "After" is filled with the bright accent green, which signals the improvement. Rename them to "Old / New", "Day 1 / Day 90" or "v1 / v2".
Headline with the result
Lead with the outcome: "Same content. *3× the signups*." The highlighted part shows in the accent colour. Long headlines shrink so they never push the photos off the post.
Photos stay private
Upload both images. They're resized and kept in your browser, never sent to a server, and the export is drawn locally. Until you upload, the "Before" panel shows a desaturated placeholder so you can see the effect.
Sharing a client's words about the result too? Combine it with Customer Testimonial.
Extend with AI
Take This Post Further With AI
Use an AI assistant to write results-driven headlines for each comparison, or extend this template into an interactive before/after slider for your website.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a 1080×1350 before-and-after comparison post in HTML and CSS.
- Dark neutral background, with a bold headline (with an accent highlight) at the top limited to about 28% of the height.
- Below it, a CSS grid with two equal rounded photo panels (background-size: cover): stacked rows on portrait and Story sizes, two columns on square and 16:9.
- Each panel has a pill label in the top-left: "Before" translucent dark, "After" in the accent colour.
- Handle at the bottom. Use --u (1% of the shorter side) for sizing.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Why use it
Why Use the Before & After Template
How it’s different
How It’s Different From Canva-Style Templates
Step by step
How to Use
- 1Pick the sizeChoose Portrait 4:5 (the Instagram feed default), Square, Story / Reel, Landscape 16:9 for X, a 1200×627 LinkedIn image or a 1000×1500 Pinterest pin. Before & After opens at 1080×1350.
- 2Edit the textClick any text in the preview, or use the fields on the left (headline, before label, after label, handle and more). Wrap words in *asterisks* to colour them.
- 3Add your imagesClick a photo area in the preview or use Images to upload your before photo and after photo and logo. Images stay in your browser.
- 4Match your brandApply your saved brand kit or one of 12 palettes, set exact colours, and choose heading and body fonts from any Google Font or your own uploaded font.
- 5Preview it in the feedSwitch the preview to Instagram, Story, X or LinkedIn to see the post with your name, handle and caption, and fix anything the quality checks flag.
- 6Download, save or bulk createDownload PNG, JPG or PDF, every size as a ZIP, or copy the HTML. Save it to My designs to reuse later, or turn a CSV into dozens of posts with Bulk create.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Open the template, upload the before and after photos, write a results headline, and download it. Portrait and Story sizes stack the photos and square and landscape put them side by side, so try the size that suits your images.
Yes. Both labels are editable, so you can use "Old / New", "Day 1 / Day 90", "v1 / v2" or another language.
Take both photos from the same angle and distance, with similar lighting. Each image is cropped to fill its panel, so keep the subject centred.
No. Both photos stay in your browser, and the export is drawn locally on your device.
Portrait post 1080×1350 (4:5): Instagram feed (recommended), Facebook and LinkedIn feeds, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook, LinkedIn and X feeds. Story / Reel 1080×1920 (9:16): Instagram and Facebook Stories, Reel covers. Landscape post 1600×900 (16:9): X feed image, Facebook landscape. LinkedIn image 1200×627 (1.91:1): LinkedIn shared image and link posts, Facebook link images. Pinterest pin 1000×1500 (2:3): Pinterest standard pin (the recommended 2:3 ratio). Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.
Press Play in the editor to watch the animation for free. Downloading it as an animated MP4 (or WebM) for Reels, Stories and WhatsApp Status is for Patreon supporters, who enter the supporter passcode once. PNG, JPG, PDF and HTML exports are free.
Yes, for Patreon supporters. Choose Export, then "Bulk create from CSV", and paste rows from a spreadsheet or upload a CSV whose column names match the Before & After fields. Every row becomes one post, and you download them all as a ZIP.
Yes. The preview switches between the plain design and mock-ups of an Instagram feed post, an Instagram Story, an X post and a LinkedIn post, using the name, handle and logo from your brand kit and the caption you type.
Yes. "Copy HTML" and "Download .html" give you one self-contained file: the markup, all the CSS and links to the Google Fonts it uses. "Fork to My Code" saves an editable copy in the UI Snippets editor. The file records the template name and version (v1.0.0).
Yes. It is free for personal and commercial posts, with no sign-up and no watermark. Everything runs in your browser and nothing you type or upload is sent to a server.