Image compare


A modern, lightweight comparison slider

Compare before and after images, for grading, CGI and other retouching comparisons. Vanilla Javascript.

npm install image-compare-viewer

Also available via CDN



Using WordPress?

Here's a ready-to-use WordPress plugin

Great customization options

How to use


Image Compare Viewer is easy to use. The HTML is as simple as adding two images into a containing parent. The parent will need an ID or class name (handy for multiple viewers on a single page).

<div id="image-compare">
  <img src="path/to/before.jpg" alt="" />
  <img src="path/to/after.jpg" alt="" />


If you're using NPM, the CSS is found at "node_modules/image-compare-viewer/src/styles/index.scss" or "node_modules/image-compare-viewer/dist/image-compare-viewer.min.css"



import ImageCompare from "image-compare-viewer";

A single viewer?

1. Reference > 2. Mount...

const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();

Multiple viewers?

1. Collect > 2. Loop > 3. Mount...

const viewers = document.querySelectorAll(".image-compare");
viewers.forEach((element) => {
  let view = new ImageCompare(element).mount();


The options object below shows the defaults of all options. All options are used in the examples.

smoothing and smoothingAmount are currently set to automatically disable in Safari. This will remain until a browser bug is resolved.

const options = {

  // UI Theme Defaults

  controlColor: "#FFFFFF",
  controlShadow: true,
  addCircle: false,
  addCircleBlur: true,

  // Label Defaults

  showLabels: false,
  labelOptions: {
    before: 'Before',
    after: 'After',
    onHover: false

  // Smoothing

  smoothing: true,
  smoothingAmount: 100,

  // Other options

  hoverStart: false,
  verticalMode: false,
  startingPoint: 50,
  fluidMode: false
// Add your options object as the second argument
const viewer = new ImageCompare(element, options).mount();



UI Theme options

  controlColor: "#73c781",
  controlShadow: false,
  addCircle: true,
  addCircleBlur: true // default
Image Compare Viewer will keep all other elements in the container, as long as you add a keep class to it, allowing you to place other elements inside the viewer, just remember to set your z-index above 10, this example also uses the CSS property 'user-select: none'.

Two Bears

– Just add .keep class to keep elements inside –


showLabels: true,
labelOptions: {
  before: 'Clay',
  after: 'Final render',
  onHover: false // default
You can style these labels using .icv__label for both, and .icv__label-before, .icv__label-after for the individual labels.

Disable Smoothing

Smoothing is automatically disabled on touch enabled screens.

  smoothing: false

Increase Smoothing

Milliseconds – a higher number means more dampening

  smoothingAmount: 300

Start on hover

Clicking will activate manual control.

  hoverStart: true

Vertical Mode

Vertical mode is mobile friendly!
  verticalMode: true

Starting Point

The percentage to show of the before image.

  startingPoint: 75

Fluid mode

Fluid mode enables the container to have fluid height and width, independent of each other, useful for using Image Compare Viewer in a full screen container for instance. The image is dynamically cropped using the CSS background 'cover' property.

  fluidMode: true

While by default a viewers height is set by the image, you must set your own height when using fluid mode.

/* Example */
#image-compare {
  width: 100%;
  height: 66vh;