Before After Studio

Embed tool

Before and After Slider Embed Code

Add an interactive before and after slider to your website without a plugin. The generated snippet is plain HTML, CSS and a few lines of JavaScript.

Images

Before image
After image

Live preview

Add both images to preview the slider exactly as it will appear on your site.

Embed code

Paste inside any HTML block. Uploaded images are embedded as text so nothing needs hosting; use URL mode for a shorter snippet.

GenAI – AI Chatbot app iconSponsorNeed copy for the page around the slider? The sponsor writes captions and intros.GenAI – AI Chatbot · iOS

Works with

Paste it where your builder accepts HTML

How it works

How to add the slider to your site

  1. 1

    Add your images

    Upload them to embed directly into the code, or paste URLs of images already on your site.

  2. 2

    Customize

    Set the labels, the starting position and whether to show a credit link. The preview is the real embed.

  3. 3

    Copy and paste

    Click Copy code and paste it into any HTML block. Refresh the page and the slider is live.

FAQ

Embed questions

Will the slider work on WordPress, Shopify or Squarespace?

Yes. Paste the snippet into any block that accepts raw HTML: the Custom HTML block in WordPress, a Custom Liquid or HTML section in Shopify, or a Code block in Squarespace and Webflow.

Why is the code so long?

When you upload images they are embedded directly into the snippet as text, so you never need to host them. If you prefer a short snippet, switch to URL mode and point to images already on your site.

Does the slider need jQuery or a plugin?

No. It is plain HTML, CSS and a few lines of vanilla JavaScript. It works in every modern browser and supports touch.

More before & after tools

Photo Maker

Side by side, slider, overlay, split and stacked PNG exports.

Side by Side Maker

Put two photos next to each other, or stacked, as one collage.

GIF Maker

Looping slider-sweep GIFs for chats, email and social.

Video Maker

MP4 or WebM reveals for reels, stories and ads.

Templates

Designed 4:5 layouts that look like finished posts.

Ready to show the change?

Free, no account, and your photos stay on your device.

Create a comparison