Skip to content
Before & After

Before and After Slider Embed

Put a draggable before-and-after slider on your own website without a plugin or an image host. Set it up below, press Create embed code, and paste the result into any page that accepts custom HTML.

After photo
Before photo

Drag the handle (or use arrow keys) to set where the embedded slider starts.

Processed on this device — nothing is uploaded

What you paste

One self-contained block of HTML. It is generated in your browser from the settings you see in the editor.

Photos inside the code

Each photo is cropped to the frame with your zoom and position, re-encoded as WebP (JPEG where the browser can't make WebP) at up to 1600 px, or 1000 px with Small, and stored inside the HTML.

Scoped and responsive

Styles and script use a random class name, so they won't clash with your theme or with a second slider on the same page. It fills the column it is placed in, up to the photo's own width.

Mouse, touch and keyboard

Drag or click to move the divider, swipe on phones, or Tab to the handle and use the arrow keys. Left–right and top–bottom sliders are both supported, starting where you left the handle.

Adding it to your site

Copy the code with Copy embed code, or download the .html file and open it to check it first. Then:

  • WordPress. In the block editor, add a Custom HTML block and paste the code. Your account needs permission to post unfiltered HTML (administrators have it); WordPress.com sites need a plan that allows custom code, otherwise the script is removed.
  • Squarespace. Edit the page, add a Code block, paste the code and leave Display Source off. If the slider shows as a still picture, your plan may not run JavaScript in Code blocks.
  • Shopify. Online Store → Themes → Customize, add a Custom Liquid section (or block) and paste the code. Custom Liquid has a size limit, so choose Small if it won't save.
  • Wix. Add → Embed Code → Embed HTML, choose Code, paste and Update. Wix shows it in a frame, so drag the frame's height until the whole slider fits.
  • Any other site. Paste it anywhere raw HTML is allowed, or upload the .html file to your server and link to it or load it in an iframe.

Size and limits worth knowing

  • The code is as large as the photos in it. The editor shows the size and warns above 1 MB, because some builders cap how much HTML one block can hold. Small (1000 px) roughly halves it.
  • If a site removes scripts, the comparison still shows as a picture split at your start position; it just can't be dragged.
  • Labels are real text drawn over the photos, so they stay sharp; your logo is part of the photos, in the same spot on both, so it never moves with the divider.
  • The embed is always a slider. For side-by-side or stacked pictures, export a PNG instead.

Questions

Does the embed load anything from your server?

No. Both photos, the styles and the script are inside the code you paste, so the slider keeps working even if this site goes away. The only thing pointing back here is the optional “Made with” link, which is a plain link.

Will it slow down my page?

It weighs about as much as the two photos it contains, which the editor shows before you copy it — typically a few hundred KB at Standard size. The script itself is under 2 KB and does nothing until someone touches the slider.

Can I change the photos after I paste it?

Not in place: the photos are part of the code. Make the new comparison in the editor, create the embed again and replace the old code. Your logo is remembered in this browser, so that part is quick.

Is it free?

Yes. The embed with a small “Made with Before and After Photo Maker” link under it is free and needs no account. Removing the link uses one credit, which needs a free Google sign-in; new accounts get 3 credits.

Is the slider accessible?

The handle is a standard slider control: it can be focused with Tab and moved with the arrow keys, Home and End, and screen readers announce its position. Each photo has alt text taken from your labels, and on touch screens a horizontal slider still lets the page scroll vertically.