CSS3-Converting Color Image to Black and White Image Using Pure CSS3

Published on August 20, 2013

In one of my previous tutorials I wrote how to convert Color image to Black and White image using HTML5 Canvas. In today’s post I will explain how to convert color image to black and white image and vice verse using pure CSS3.

Demo

Download

The code is very simple we just need to add only one line of css code to do it. That is filter: grayscale(100%);. But to make it little interesting I wrote a simple JavaScript code in which the image will be changed into black and white image when we click on a button. Now let’t jump in to the coding.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3-Converting Color Image to Black and White Image Using Pure CSS3 Techumber</title>
<meta name="description" content="CSS3-Converting Color Image to Black and White Image Using Pure CSS3">
<meta name="author" content="Aravind Buddha">
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<div class="container">
<header>
<h1 class="logo">
<a href="//techumber.com">
<img src="../asserts/img/logostd.png" alt="techumber logo" title="techumber logo" />
</a>
</h1>
</header>
<section class="contant">
<button id="convert">Click here </button>
<img id="img" src="1.jpg" alt="techumber.com CSS3 black and white"/>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background: #000;
  font-family: helvetica, 'Comic Sans MS', arial, sans-serif;
}
.container {
  width: 700px;
  margin: 0 auto;
}
.logo {
  text-align: center;
}
.contant {
  margin: 0 auto;
  width: 300px;
}
button {
  width: 215px;
  height: 50px;
  margin: 0 0 10px 35px;
  font-size: 20px;
  font-weight: bolder;
  cursor: pointer;
}
.bwImg {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

script.js

window.onload = function() {
  //get elements
  var f = 1,
    img = document.getElementById('img'),
    cvrt = document.getElementById('convert');
  //button click event
  cvrt.onclick = function() {
    if (f) {
      img.className = 'bwImg';
      f = 0;
      cvrt.innerHTML = 'Convert to Color';
    } else {
      img.className = '';
      f = 1;
      cvrt.innerHTML = 'Convert to B/W';
    }
  };
};

This is just simple JavaScript code. When we click on the convert button, will apply the class bwImg on image. If already applies we will remove the class. So it will create a illustration of changing color image to black and white and vice verse.