Before & After

v1.0.01080×1350

Click any text to edit it · drag a photo to reposition it, scroll to zoom, click to replace

Related Social Post Templates

2 in Social Proof categoryView all →
Before & After template preview
Social Proof

Before & After

v1.0.0 · 4 sizes
Customer Testimonial template preview
Social Proof

Customer Testimonial

v1.0.0 · 4 sizes

Before & After — Free Social Proof Social Post Template

Social Proof · v1.0.0 · Updated 2026-10-16 · Instagram, Facebook & X · HTML + CSS

CategorySocial Proof
Tagsbefore aftercomparisonphotoresultsdark
Sizes4:5 · 1080×13501:1 · 1080×10809:16 · 1080×192016:9 · 1600×900
Updated October 16, 2026

What's included

Features

Two equal photo panels using CSS grid
Stacked on portrait and Story, side by side on square and landscape
Editable "Before" and "After" pill labels, with the After label in the accent
Results headline with *asterisk* highlights
Headline shrinks so photos always keep their space
Dark neutral background that suits any photos
Photos stay in your browser; nothing is uploaded
PNG, JPEG, ZIP or HTML export

About this template

Before & After — Free Before and After Comparison Post Template

Before & After social post template: A dark comparison post with two photo panels labelled "Before" and "After" (stacked on tall posts, side by side on wide ones) and a results headline.

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.

Why use it

Why Use the Before & After Template

⇔
A fair comparison
CSS grid keeps both panels exactly the same size, so the improvement is clear and not an artefact of cropping.
↕
Layout follows the format
Panels stack on tall Story and portrait sizes and sit side by side on square and landscape, keeping each image large.
◍
Private photos
Client and project photos are processed in your browser and never uploaded, which matters for client work.

How it’s different

How It’s Different From Canva-Style Templates

</>
Real HTML and CSS, not a locked image
Canva-style templates only give you an image. These are plain HTML and CSS you can copy, download as a .html file or fork into My Code, then reuse on a website, in an email or in your own design system.
◍
Private by design
Text and photos never leave your browser. Images are drawn locally on a canvas, so client photos and unreleased product screenshots stay on your device.
⇲
Every size from one design
Layouts use relative units, so one design exports as an Instagram portrait post, a square, a Story and a 16:9 X post, or all four at once as a ZIP.
✓
Free, with no account or watermark
No sign-up, no premium-only templates, no watermark and no download limits. Edits are saved in your browser for next time.
Aa
Text that always fits
Long headlines shrink step by step instead of overflowing, and Story layouts keep text clear of Instagram’s buttons. Most template editors leave both to you.
v1
Versioned templates
Each template has a version number and an update date, and the exported HTML records which version you used, so you can tell when a design changes.

Step by step

How to Use

  1. 1
    Pick the sizeChoose Portrait 4:5 (the Instagram feed default), Square, Story / Reel or Landscape 16:9 for X. Before & After opens at 1080×1350.
  2. 2
    Edit 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.
  3. 3
    Add your imagesClick a photo area in the preview or use Images to upload your before photo and after photo. Images stay in your browser.
  4. 4
    Match your brandApply one of 12 palettes or set exact colours with the pickers, then choose heading and body fonts.
  5. 5
    Download or take the codeDownload a PNG or JPEG at full size, download every size as a ZIP, copy the HTML, or fork it into My Code to keep editing.

Real-world uses

Common Use Cases

🖥
Website and app redesigns
Show the old and new homepage side by side, with the business result such as more signups or faster load times in the headline.
🏠
Renovation and cleaning
Contractors, cleaners and interior designers can post stacked before and after room photos in the Story size, with the service named in the headline.
💪
Fitness and coaching progress
Share client progress with "Day 1" and "Day 90" labels and the client's permission, highlighting the result in the accent colour.
📷
Photo editing and retouching
Show a raw photo next to your edit to market editing services, presets or retouching skills, using the square size for a balanced comparison.

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 feed, X portrait. Square post 1080×1080 (1:1): Instagram, Facebook 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. Switch sizes in the editor and the layout adapts, or click "All sizes (ZIP)" to download every size at once.

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.