Home » CSS » Convert Images To Black And White using CSS-grayscale filter

Convert Images To Black And White using CSS-grayscale filter

The CSS grayscale filter

We can change color image to a black and white with CSS.
We need to implement a filter as a class.

img.blackndwhite{ filter: grayscale(100%); }

Chrome and Safari still implement CSS filters need web kit declaration.

img.blackndwhite { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

—————————-More grayscale filter code examples——————–

img.blackndwhite {
filter: url("data:image/svg+xml;utf8,#grayscale"); /*** Firefox 3.5+ ****/
filter: gray; /*** IE6-9 ****/
-webkit-filter: grayscale(100%); /*** Chrome 19+ & Safari 6+ ****/
}

Leave a Reply

x

Check Also

website development

How to disable AdBlock extensions for a particular website

Example website is smarttips.in ,replace with your website and guide your users to disable the ...