Before & After Image Embed Generator

Turn two HTTPS image URLs into a responsive comparison slider. The files must be publicly readable for visitors. Set the labels, image descriptions, caption, and opening split. Preview the result, then copy one dependency-free HTML snippet.

The images stay on their current hosts. CAD Scene does not upload or store them.

Matched clay model and finished render of the same Nordic courtyard house — Use the same camera and crop on both sides. The seam should reveal the change, not hide a mismatch.

Build the comparison

Add two HTTPS image URLs. They must be publicly readable for visitors. The tool returns one responsive HTML snippet with no external dependency.

Preview

Some image hosts block third-party previews. The copied snippet still uses the URLs you entered.

Embed code

<div data-cadscene-compare style="--split:50%;--ratio:3 / 2">
  <style>
    [data-cadscene-compare]{max-width:960px;margin:0 auto;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;color:#3f3f46}
    [data-cadscene-compare] .cs-frame{position:relative;aspect-ratio:var(--ratio);overflow:hidden;background:#08090b;border:1px solid #e4e4e7;border-radius:16px}
    [data-cadscene-compare] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    [data-cadscene-compare] .cs-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
    [data-cadscene-compare] .cs-label{position:absolute;bottom:12px;z-index:2;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:12px}
    [data-cadscene-compare] .cs-before-label{right:12px}
    [data-cadscene-compare] .cs-after-label{left:12px;background:#38bdf8;color:#082f49;font-weight:600}
    [data-cadscene-compare] .cs-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;cursor:ew-resize;opacity:0}
    [data-cadscene-compare] .cs-line{position:absolute;inset-block:0;left:var(--split);z-index:3;width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
    [data-cadscene-compare] .cs-handle{position:absolute;left:50%;top:50%;display:grid;width:36px;height:36px;place-items:center;transform:translate(-50%,-50%);border-radius:999px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.24)}
    [data-cadscene-compare] .cs-arrows{position:relative;width:18px;height:12px}
    [data-cadscene-compare] .cs-arrows:before,[data-cadscene-compare] .cs-arrows:after{content:"";position:absolute;top:3px;width:7px;height:7px;border-top:2px solid #3f3f46;border-left:2px solid #3f3f46}
    [data-cadscene-compare] .cs-arrows:before{left:1px;transform:rotate(-45deg)}
    [data-cadscene-compare] .cs-arrows:after{right:1px;transform:rotate(135deg)}
    [data-cadscene-compare] .cs-range:focus-visible + .cs-line .cs-handle{outline:3px solid #38bdf8;outline-offset:3px}
    [data-cadscene-compare] figcaption{margin-top:10px;text-align:center;color:#71717a;font-size:12px}
    [data-cadscene-compare] .cs-credit{display:block;margin-top:5px;color:#0369a1}
    @media (prefers-color-scheme:dark){
      [data-cadscene-compare]{color:#e4e4e7}
      [data-cadscene-compare] .cs-frame{border-color:#3f3f46}
      [data-cadscene-compare] figcaption{color:#a1a1aa}
      [data-cadscene-compare] .cs-credit{color:#7dd3fc}
    }
  </style>
  <figure style="margin:0">
    <div class="cs-frame">
      <img src="https://cadscene.com/static/images/before-after/sketchup-clean-source.webp" alt="Bare architectural model view before rendering" loading="lazy">
      <span class="cs-label cs-before-label">Model view</span>
      <div class="cs-after">
        <img src="https://cadscene.com/static/images/before-after/sketchup-blue-hour-render.webp" alt="Finished architectural render of the same view" loading="lazy">
        <span class="cs-label cs-after-label">Rendered</span>
      </div>
      <input class="cs-range" type="range" min="0" max="100" value="50" aria-label="Reveal Rendered over Model view">
      <span class="cs-line" aria-hidden="true"><span class="cs-handle"><span class="cs-arrows"></span></span></span>
    </div>
    <figcaption>A model view and its finished render.<br><a class="cs-credit" href="https://cadscene.com/before-after" target="_blank" rel="noopener noreferrer">Before and after by CAD Scene</a></figcaption>
  </figure>
</div>
<script>(function(s){var r=s.previousElementSibling,i=r.querySelector('.cs-range');i.addEventListener('input',function(){r.style.setProperty('--split',i.value+'%')})})(document.currentScript)</script>

What should the two images prove?

Keep the camera, crop, massing, openings, and proportions aligned. A slider makes drift easy to see. Review the render-retention method before presenting a pair as evidence.

Need a clean starting view? Use the screenshot capture guide.

Where can you use the snippet?

Paste it into a portfolio, case study, studio site, or CMS block that accepts HTML and scripts. Confirm the host allows inline scripts before publishing.

Keep both files light for mobile readers. The Image to WebP converter compresses them in your browser. Browse the architectural before and after examples for matched-pair references.

Before and after embed questions

What does the generator create?

It creates one responsive HTML snippet with its own styles and comparison control. Paste the snippet into a page or CMS block that accepts HTML and scripts.

Does CAD Scene upload the images?

No. The generator reads the HTTPS image URLs you enter. Those URLs must be publicly readable for visitors. CAD Scene does not upload, copy, or store either image.

Will the slider work without a JavaScript package?

Yes. The copied snippet has no package or CDN dependency. A short inline script updates the split as the range control moves.

Why must the images use the same crop?

A comparison is easiest to read when camera, crop, massing, and openings align. Different views can imply a change that the images do not prove.

Make the pair before you share it

Start from a clean scene. Render the finished direction, then review both images on the same frame.

Start free

Your first renders are free. No credit card.