Before & After Image Embed Generator

Turn two HTTPS image URLs into a responsive comparison slider. Set the labels, image descriptions, caption, and opening split. Then copy the snippet, download a standalone page, or download that page and its assets as a ZIP.

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. Nothing you export needs a package or a CDN.

Preview

Some image hosts block third-party previews. Your exports still use the URLs you entered.

Export

Embed snippet
One HTML block. Paste it into a page or CMS.
View 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;touch-action:pan-y} [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(){ var roots = document.querySelectorAll('[data-cadscene-compare]'); for (var i = 0; i < roots.length; i++) { (function (root) { var range = root.querySelector('.cs-range'); if (!range || root.hasAttribute('data-cs-ready')) return; root.setAttribute('data-cs-ready', ''); range.addEventListener('input', function () { root.style.setProperty('--split', range.value + '%'); }); })(roots[i]); } })();</script>
Standalone page
A finished page you can publish as it is.
Page package
The page in separate files, with a readme.

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 publish it?

Paste the snippet into a portfolio, case study, studio site, or CMS block that accepts HTML and scripts. Confirm the host allows inline scripts before publishing. Where it does not, upload the downloaded page instead and link to it from the case study.

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?

Three exports from the same comparison. One responsive HTML snippet for a page or CMS block. One standalone .html page you can publish as it is. One ZIP with that page split into index.html, assets/styles.css, and assets/compare.js, plus embed.html and a README.

Where does the downloaded page work?

On any host that serves static files, and locally by opening the file. The page carries its own styles, script, and share preview tags. It respects light and dark system settings and reads from 320px up. The two images still load from their own host.

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. No export has a package or CDN dependency. A short script updates the split as the range control moves, and the control stays keyboard operable.

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.