CSS3 Snippet: Convert Color Images to Black and White

Have you ever wanted to make a full color image black and white? In today’s tutorial we’ll show you a quick css3 snippet which will convert your images into Black and White easily without having to use Photoshop. The CSS3 snippet will convert the image into greyscale with the use of filters.

There are plenty of ways to convert your images into black and white, css3 is the best solutions when dealing with websites. In addition to this css3 function you can include animations, transitions and hover effects for countless ideas and effects like fade,  roll over and more.

CSS3 Snippet: Convert Color Images to Black and White

HTML

Let’s start with the HTML, your image source tag will be surrounded with a div id named ‘image’. If you’ll looking to add more than one black and white effect you can name your target each image with their own name id.

<div id="image">
 <img src="//www.todaysparent.com/wp-content/uploads/2013/06/family-health-dandilion-girl-istock.jpg" >
 </div>

CSS3

Now for the css, we have applied three filters, the first filter targets svg images, the second filter will target standard filters, while the third filter will target web browsers like Safari and Chrome.

#image{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }

Source