Daniel Hernández Asked: 2020-01-23 14:43:53 +0800 CST 2020-01-23 14:43:53 +0800 CST 2020-01-23 14:43:53 +0800 CST Create grayscale filter for image with CSS 772 How can I apply a grayscale filter to an image with CSS? css 2 Answers Voted fredyfx 2020-01-23T14:50:52+08:002020-01-23T14:50:52+08:00 Original StackOverflow answer in English Webkit has support for CSS filters Cross-browser compatibility! img { filter: gray; /* IE6-9 */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ } /* Disable grayscale on hover */ img:hover { filter: none; -webkit-filter: grayscale(0); } <img src="http://lorempixel.com/630/170/"> Best Answer Daniel Hernández 2020-01-23T14:47:19+08:002020-01-23T14:47:19+08:00 Syntax .imagen { filter: <filter-function> [<filter-function>]* | none } An example applying a filter to an image would be: HTML <img class="blur" src="imagen.jpg" /> CSS .blur { -webkit-filter: grayscale(20%) filter: grayscale(20%); }
Original StackOverflow answer in English
Webkit has support for CSS filters Cross-browser compatibility!
Syntax
An example applying a filter to an image would be:
HTML
CSS