Free ToolCreative

Generate a before-and-after slider embed

Paste public before and after image URLs, preview the slider, set its height, labels, and starting position, then copy a self-contained HTML snippet.

Use this tool free

Browser tool

Before-after slider embed generator

Paste image URLs and copy a self-contained HTML comparison slider snippet. Nothing is uploaded.

Before image URLAfter image URLEmbed height (px)Initial slider position: 50%Before labelAfter label

Live preview

<div class="me-before-after" style="--position:50%;position:relative;max-width:900px;height:1200px;overflow:hidden;border-radius:16px;background:#111827;">
  <img src="before.jpg" alt="Before" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
  <div style="position:absolute;inset:0;width:var(--position);overflow:hidden;">
    <img src="https://magiceraser.pro" alt="After" style="width:calc(10000% / max(var(--position), 1%));height:100%;object-fit:cover;max-width:none;">
  </div>
  <span aria-hidden="true" style="position:absolute;top:0;bottom:0;left:var(--position);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);"></span>
  <input type="range" min="0" max="100" value="50" aria-label="Compare Before and After" oninput="this.parentElement.style.setProperty('--position',this.value+'%')" style="position:absolute;left:0;right:0;bottom:16px;width:90%;margin:auto;display:block;accent-color:#ff3838;">
</div>

How to use

Paste the public before and after image URLs

Set the height, labels, and starting slider position

Copy the snippet into your website or CMS

Features

Embeddable HTML

Generate HTML, CSS, and JavaScript for a before-and-after image comparison slider to embed on your website.

Live preview

Paste public before and after image URLs, preview the slider, set its height, labels, and starting position, then copy a self-contained HTML snippet.

No image upload

No. It only writes the URLs into code in your browser. Your image host must allow the images to be displayed publicly.

After this task

After this free tool, open Magic Eraser for the next AI editing workflow.

Continue with Magic Eraser

Specifications

Input	HTTPS image URLs
Output	HTML + CSS + JavaScript
Processing	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Common questions

Does this upload images?

No. It only writes the URLs into code in your browser. Your image host must allow the images to be displayed publicly.

Can I edit the snippet?

Yes. The output is plain HTML, CSS, and JavaScript that you can customize.

Need an edited after image?

Use Magic Eraser to clean up your photo, then generate a comparison slider here.

Open Magic Eraser

More free tools

Explore our other limited free edits after sign-in photo and image tools.

Design beautiful gradients and export as CSS or images

Design linear, radial, and conic gradients with multiple color stops. Copy the CSS code or download as a PNG image.

Convert color codes between every major format

Convert colors between HEX, RGB, HSL, HSB, CMYK, and CSS named formats. See a live preview, copy any value, and export a color card.

Convert HEX color codes to RGB and back

Convert HEX color codes to RGB values and vice versa. Live preview, one-click copy, and CSS snippet output. works in your browser.

Extract exact colors from any image

Pick any color from an uploaded image and get its HEX, RGB, and HSL codes instantly. Build palettes from photos for web design, branding, and illustration.

Extract a color palette from any photograph

Upload a photo and extract 5-10 dominant colors with HEX, RGB, and HSL codes. Copy swatches, export as ASE or CSS variables.

Generate customizable QR codes for any content

Generate QR codes for URLs, text, WiFi credentials, and vCards. Customize colors, add a center logo, and download as PNG or SVG.