For portfolios & products

Before & after.

A responsive comparison slider with clear labels, keyboard controls and a touch-friendly handle. Images stay on your own hosting, and the component keeps its styling separate from your site.

Preview

Website widget

Embed code

<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/image-compare.js" defer></script>
<sos-image-compare data-config="{&quot;before&quot;:&quot;https://tools.stuffonscreen.com/toolkit/demo-before.svg&quot;,&quot;after&quot;:&quot;https://tools.stuffonscreen.com/toolkit/demo-after.svg&quot;,&quot;beforeLabel&quot;:&quot;Before&quot;,&quot;afterLabel&quot;:&quot;After&quot;,&quot;alt&quot;:&quot;A website layout changes from a crowded grey page to a spacious green design.&quot;}"></sos-image-compare>

Paste into an HTML block where you want the tool. The credit is included. Platform instructions · Licence

Self-hosting ZIP

How it works

Images are cropped to the same 16:10 frame using object-fit: cover. Match their dimensions and alignment for a fair comparison.
The native slider supports touch, mouse, arrow keys, Home and End. Keep a useful description and both labels.
Your image host receives image requests from visitors. We do not proxy, store or process the images.

Uses & downloads

Renovations, photo edits, product finishes and design work.

Website widget. No account or API key. A visible credit is included in the website component.

Plain-text instructions for developers & AI assistants →

Before & after.

Settings

Preview

Embed code

How it works

Uses & downloads

Installation & customisation