Make Image Black & White (grayscale) using CSS In Webkit


Read {count} times since 2020

If you want to make images grayscale ie black & white you can use this tutorial.
Note that this trick will only work on browsers that runs webkit which is used by browsers like Google Chrome, SafariMidori etc.
Other browsers using different engines do not support the gray scake option. Hence this trick does not support all browsers.
Grayscaled Image Using CSS & Original Image
Grayscaled Image Using CSS & Original Image
Here’s the CSS code which will make all images grayscale.

<pre class="prettyprint"><code>img{

-webkit-filter: grayscale(100%); }

<p>
  If you want to make the image normal when hovered, use the following code :
</p>

<pre class="prettyprint"><code>img:hover{

-webkit-filter: grayscale(0%); }

<p>
  The gray scale effect amount is mentioned as value. "100%" is for full gray scale effect. Making the grayscale value "0%" would remove the grays scale effect on the image. The image will become normal when the value is changed to "0%" or if the value is not present at all.
</p>
Show Comments