7+ CSS Comparison Slider Examples

This post contains a total of 7+ Hand-Picked CSS Comparison Slider Examples with Source Code. All these Comparison Sliders are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Comparison Slider Examples

1. By aPinix

Made by aPinix. Simple CSS Image comparison slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins");
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
}

body {
  width: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Poppins", Arial, sans-serif;
  line-height: 1.4em;
  color: #DDE5F3;
  background: #142536;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper .block {
  position: relative;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 15px -1px rgba(0, 0, 0, 0.1), 0 25px 50px -4px rgba(0, 0, 0, 0.3);
}

.image-slider {
  width: 800px;
  height: 450px;
  border-radius: 8px;
  background-image: url("https://image.ibb.co/bUpYsq/light.jpg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.image-slider__inner {
  max-width: 800px;
  min-width: 0px;
  height: 100%;
  background-image: url("https://image.ibb.co/gNQpXq/dark.jpg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  resize: horizontal;
  position: absolute;
  top: 0;
  left: 0;
}
.image-slider__inner:before {
  content: "";
  width: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  font-size: 20px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.image-slider__inner:after {
  content: "";
  width: 40px;
  height: 30px;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -9px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAXCAYAAACmnHcKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB1ZiBccIwDEW/u0A7gkfICkzQjkBH6gSlE7SdIN2gGzTpAi0TICSwA5fEscER4Henczg4Kc/OCTsGiRCR5eGR49cY84ELwDWXPNxzfHLNFnPASSuOfzrwCmW4Rn1Ur3GTmZ20L+J5gBJy4yP18oQmRIjmmKlwXRuo2ZxVNyJyLZlJobtAsoqHmkPtUcrActRjQgOZGxfxWIwImeMPJ4pIe15DB6n/lPC7lmPh23YnU8iKjNHCCe1kChbxtBAhuZIOgf1zWDJfXoZQPmvfzd5QPi/dFS/OispluFekMoU6kf7/jHQz6WoV4iyw7yIaWHcfMVbckp+D34oQx3fCjFgoQdN7s8GKxJKlCFkokSBz2nkqQchCiYjMeQfDiJCFEhMyeSfcgFADRVzNv1lFesnfXVI5sKXsaHNrLjl+ODak8c6BFM/9c9TcAqD989ZqBWlEAAAAAElFTkSuQmCC");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

.image-slider__handle {
  width: 400px;
  min-width: 20px;
  max-width: 100%;
  height: 15px;
  margin-right: 0px;
  opacity: 0;
  position: relative;
  top: 50%;
  left: 0px;
  outline: 0 solid transparent;
  cursor: default;
  transform: scaley(35);
  transform-origin: center center;
  resize: horizontal;
}

@-webkit-keyframes delta {
  33% {
    width: 200px;
  }
  66% {
    width: 600px;
  }
}

@keyframes delta {
  33% {
    width: 200px;
  }
  66% {
    width: 600px;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="block">
    <div class="image-slider">
      <div class="image-slider__inner">
        <textarea class="image-slider__handle" readonly="readonly" cols="0" rows="0"></textarea>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</body>
</html>

2. By Matthias ZΓΆchling

Made by Matthias ZΓΆchling. Image comparison slider with Grayscale. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.image-compare {
	--splitter-color: hotpink;
	--splitter-size: 0.125rem;
	--expand: 0.875rem;
	--handle-size: calc(var(--expand) + var(--splitter-size));
	position: relative;
}
.image-compare span {
	display: block;
	position: absolute;
	top: 0;
	left: calc(-1 * var(--expand));
	bottom: calc(-1 * var(--expand));
	width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
	max-width: calc(var(--expand) + 100%);
	min-width: var(--handle-size);
	padding-left: var(--expand);
	padding-bottom: var(--expand);
	background: linear-gradient(135deg, transparent 0, transparent 50%, var(--splitter-color) 50%, var(--splitter-color)) 100% 100% / var(--handle-size) var(--handle-size) no-repeat;
	resize: horizontal;
	overflow: hidden;
}
.image-compare img {
	display: block;
	height: 100%;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.image-compare > img {
	max-width: 100%;
	height: auto;
}
.image-compare span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: var(--expand);
	border-right: var(--splitter-size) solid var(--splitter-color);
}

/* Safari Workaround */

@supports (-webkit-hyphens: none) { /* Safari */
	.image-compare span {
		width: var(--handle-size);
	}
}

/* Accessibility Fallback #1 */

@-webkit-keyframes pingpong {
	0%, 100% {
		width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
	}
	75% {
		width: var(--handle-size);
	}
	25% {
		width: calc(var(--expand) + 100%);
	}
}

@keyframes pingpong {
	0%, 100% {
		width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
	}
	75% {
		width: var(--handle-size);
	}
	25% {
		width: calc(var(--expand) + 100%);
	}
}
.image-compare:focus span {
	background-image: none;
	-webkit-animation: pingpong 5s linear infinite;
	        animation: pingpong 5s linear infinite;
	resize: none;
}

/* Accessibility Fallback #2 */

@-webkit-keyframes fade {
	0%, 22%, 77%, 100% {
		opacity: 1;
	}
	27%, 73% {
		opacity: 0;
	}
}

@keyframes fade {
	0%, 22%, 77%, 100% {
		opacity: 1;
	}
	27%, 73% {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.image-compare:focus span {
		width: calc(var(--expand) + 100%);
		-webkit-animation-name: fade;
		        animation-name: fade;
	}
	.image-compare:focus span::after {
		display: none;
	}
}

/* unimportant stuff below */

*,
::before,
::after {
	box-sizing: border-box;
}
:focus {
	outline: 1px dashed hotpink;
	outline-offset: 1px;
}
html {
	font-family: sans-serif;
	line-height: 1.5;
	font-size: 100%;
}
body {
	max-width: 24rem;
	margin: 1rem auto 6rem;
}
figure {
	padding: 1rem;
	background-color: #ccc;
}
figure,
p {
  margin: 0 0 1rem;
}

/* what follows is a hack so we only need one image */

span img {
  filter: grayscale(1);
}
</style>
</head>
<body>
  <figure>
  <p class="image-compare" role="img" tabindex="0" aria-label="When comparing the photos, it becomes noticable that the black-and-white image lacks color." aria-description="This image is actually a set of two images, and when the set is focused, the two contained images are alternated between.">
    <span>
      <img src="//cssence.github.io/assets/placeholder.jpg" alt="Random cat picture, with color taken away.">
    </span>
    <img src="//cssence.github.io/assets/placeholder.jpg" alt="Unaltered random cat picture.">
  </p>
  <figcaption>Text</figcaption>
</figure>
</body>
</html>

3. By Foolish Developer

Made by Foolish Developer. Product Comparison slider. Source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style media="screen">
      *,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: grid;
    background: #d1ebec;
    place-items: center;
}
.container{
    height: 62.5vmin;
    width: 100vmin;
    position: relative;
    overflow: hidden;
    border: 5px solid #bfc0c1;
    box-shadow:-3px 5px 15px #000;

}
img{
    width: 100%;
    height: 100%;
    position: absolute;
}
#my-img{
    clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%);
}
#slider{
    position: relative;
    -webkit-appearance: none;
    width: calc( 100% + 40px);
    height: 100%;
    margin-left: -20px;
    background-color: transparent;
    outline: none;
}
#slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 45px;
    width: 45px;
    background: url("slider-icon.svg"),
    rgba(255,255,255,0.3);
    border: 4px solid white;
    border-radius: 50%;
    background-size: contain;
    cursor: pointer;
}
    </style>
</head>
<body>
    <div class="container">
        <img src="https://1.bp.blogspot.com/-FutRlHQKD9Q/YUSj-Aq6rwI/AAAAAAAACeA/b0VoUNwUaAkUMFC2lDNzarPCDT7a6LtZwCNcBGAsYHQ/s16000/image-2%2B%25281%2529.jpg">
        <img id="my-img" src="https://1.bp.blogspot.com/-UGn5bRpcoWs/YUSkA4ymR4I/AAAAAAAACeE/zinIssua8qMjOlQXmTdta-FFUbE5LkWfQCNcBGAsYHQ/s16000/image-2.jpg">
        <input type="range" min="0" max="100" value="50" id="slider" oninput="slide()">
    </div>
    <script>
function slide(){
    let slideValue = document.getElementById("slider").value;
    document.getElementById("my-img").style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)";
    console.log("polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)");
}
    </script>
</body>
</html>

4. by alphardex

Made by alphardex. Basic CSS Comparison Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #f7f7fd;
}

.w-half {
  width: 50%;
}

.overlay::before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  background: white;
  background-clip: content-box;
  cursor: ew-resize;
  filter: drop-shadow(0 0 2px black);
}
</style>
</head>
<body>
  <div class="relative inline-flex">
  <div class="absolute top-0 bottom-0 left-0 w-half overflow-hidden resize-x max-w-full overlay">
    <img src="https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg" class="w-100 select-none" alt="">
  </div>
  <img src="https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg" class="w-100 select-none" alt="">
</div>
</body>
</html>

5. By Bousahla Mounir

Made by Bousahla Mounir. CSS Image Comparison Slider with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
*{
    padding: 0;
    margin: 0; 
    font-family: 'Pacifico', cursive;
}
body{
    background:#fff;
}
.container{
    position: absolute;
    top: 50%;   left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;   height: 350px;
    background: #262626;
    overflow: hidden;
    cursor: pointer;
}
.container::before{
    content: '';
    position: absolute;
    top: 0;   left: 0;
    width: 100%;   height: 100%;
    background: url(https://justsomething.co/wp-content/uploads/2016/03/32-unbelievable-movi-01-5.jpg);
    background-size: 600px 700px; 
    background-position: 0 -350px;
}
.container::after{
    content: '';
    position: absolute;
    top: 0;   left: 0;
    width: 0;   height: 100%;
    background: url(https://justsomething.co/wp-content/uploads/2016/03/32-unbelievable-movi-01-5.jpg);
    background-size: 600px 700px;   
    border-right: 10px solid #f00;
    box-sizing: border-box;
    transition: 1.5s;
}
.container:hover::after{
    width: 100%; 
}
</style>
</head>
    <body>
       <div class="container"> </div>

</body>
</html>

6. By Charles Robinson

Made by Charles Robinson. Before / After Comparison Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/guruscriptz/image-comparision-css.css'>
</head>
<body>
  <header>
		<h1>Image Comparison Slider</h1>
	</header>
	<figure class="cd-image-container">
		<img src="https://images.clickfunnels.com/2f/97714002ad11e59ac73f86a0eaa2c5/taj-mahal.jpg" alt="Original Image">
		<span class="cd-image-label" data-type="original">Original</span>

		<div class="cd-resize-img"> <!-- the resizable image on top -->
			<img src="https://images.clickfunnels.com/f9/18ca1002ac11e59c265f9aab5a4d0a/austin-fireworks.jpg" alt="Modified Image">
			<span class="cd-image-label" data-type="modified">Modified</span>
		</div>

		<span class="cd-handle"></span>
</figure>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/guruscriptz/image-comparison.js'></script>

</body>
</html>

7. By Vlada

Made by Vlada. Earth – image comparison. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
  
<style>
body {
  background: #353848;
}

.container {
  width: 500px;
  height: 370px;
  border: 1px solid #fff;
  position: relative;
  margin: auto;
}

.container img {
  height: 100%;
  object-fit: cover;
  position: absolute;
}

.coverImage {
  position: absolute;
  background: url("https://www.dropbox.com/s/t96792sp9ab2r8m/IMG_0280.PNG?raw=1");
  background-size: auto 100%;
  width: 40%;
  height: 100%;
}

.handle {
  width: 0px;
  height: 100%;
  border-left: 5px solid #fff;
  position: absolute;
  left: 40%;
}

.handle:after {
  content:"";
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #999;
  line-height: 60px;
  font-weight: 300;
  text-align: center;
  background: #fff;
  position: absolute;
  left: -20px; top: 0; bottom: 0;
  margin: auto;
}
</style>
</head>
<body>
  <div class="container">
 
   <img src="https://www.dropbox.com/s/0fwcapymrdywbre/IMG_0281.PNG?raw=1" class="image1">

  <div class="coverImage"></div>
  <div class="handle"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
      <script id="rendered-js" >
$(".handle").draggable({
  axis: "x",
  containment: "parent",
  drag: function () {
    var position =
    $(this).position();
    var positionExtra = position.left + 6;

    $(".coverImage").width(positionExtra + "px");
  } });
    </script>
</body>
</html>

8. By Tania Shulga

Made by Tania Shulga. Fashion Comparison Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url("https://fonts.googleapis.com/css?family=Kaushan+Script");
@import url("https://fonts.googleapis.com/css?family=Tangerine");

/* reset css*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  border: none;
}

.comparison-slider {
  position: relative;
  width: 100%;
  min-height: 55vw;
  overflow: hidden;
}

.picture {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
  overflow: hidden;
}

.picture__content-wrap {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
}

.picture__content {
  position: absolute;
  width: 25%;
  top: 20%;
  left: 7%;
  padding: 2.5%;
  text-align: center;
  z-index: 41;
}
.picture--before .picture__content {
  background-color: rgba(34, 34, 34, 0.75);
  color: #fff;
}
.picture--after .picture__content {
  background-color: rgba(240, 248, 255, 0.75);
  color: #222;
}
.picture img {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
}

.comparison-slider h3 {
  font-family: "Kaushan Script", cursive;
  font-size: 12px;
  text-transform: uppercase;
}
.picture--before h3 {
  color: #fff;
}
.picture--after h3 {
  color: #214569;
}

.comparison-slider p {
  font-family: "Tangerine", cursive;
  font-size: 8px;
}

.picture--before {
  z-index: 1;
}

.handle {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  height: 120%;
  width: 2px;
  background-color: #214569;
  transform: rotate(15deg) translateY(-50%);
  transform-origin: top;
  z-index: 3;
}

.picture--after {
  transform: skew(-15deg);
  margin-left: -2000px;
  width: calc(50vw + 2000px);
  z-index: 2;
}

.picture--after .picture__content-wrap {
  transform: skew(15deg);
  margin-left: 2000px;
}

@media /* medium */ (min-width: 451px) {
  .comparison-slider h3 {
    font-size: 16px;
  }
  .comparison-slider p {
    font-size: 10px;
  }
}

@media /* large */ (min-width: 769px) {
  .comparison-slider h3 {
    font-size: 20px;
  }
  .comparison-slider p {
    font-size: 34px;
  }
  .handle {
    width: 3.5px;
  }
}

@media /* extra-large */ (min-width: 1025px) {
  .comparison-slider h3 {
    font-size: 24px;
  }
  .comparison-slider p {
    font-size: 34px;
  }
  .handle {
    width: 5px;
  }
}
</style>
</head>
<body>
  <section id="comparison-slider" class="comparison-slider">
    <div class="picture picture--before">
      <div class="picture__content-wrap">
        <div class="picture__content">
          <h3>from idea to life</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia, laudantium.
          </p>
        </div>
        <img src="https://s3.amazonaws.com/projects.loratadin.com/fashion/photo.jpg" alt="sketch">
      </div>
    </div>
    <div class="picture picture--after">
      <div class="picture__content-wrap">
        <div class="picture__content">
          <h3>from idea to life</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia, laudantium.
          </p>
        </div>
        <img src="https://s3.amazonaws.com/projects.loratadin.com/fashion/sketch.jpg" alt="photo">
      </div>
    </div>
    <div class="handle"></div>
  </section>
      <script>
document.addEventListener('DOMContentLoaded', function () {
  let comparisonSlider = document.getElementById('comparison-slider');
  let pictureAfter = comparisonSlider.querySelector('.picture--after');
  let handle = comparisonSlider.querySelector('.handle');
  let skew = 0;
  let delta = 0;

  if (comparisonSlider.className.indexOf('comparison-slider') != -1) {//if our section has a class β€˜comparison-slider’ 
    skew = 2000;
  }

  comparisonSlider.addEventListener('mousemove', function (e) {
    delta = (e.clientX - window.innerWidth / 2) * 0.5; // distance between the mouse and the center of the section
    handle.style.left = e.clientX + delta + 'px'; // change handle position
    pictureAfter.style.width = e.clientX + skew + delta + 'px'; // change width of pictureAfter
  });
});
    </script>
</body>
</html>