December 22, 2014

How to add grayscale to an image using css?

Add grayscale to an image using css

CSS Filters are a powerful tool that you can use to achieve varying visual effects (sort of Photoshop filters). Filters are commonly used to adjust the rendering of an image, a background, or a border.


Converts the input image to grayscale. The value of “amount” defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.


<img src="" />


img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

No comments:

Post a Comment

Popular Posts