Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

CSS3 Grayscale Image Filter Tutorial

Using CSS3 to automatically style images to grayscale.

First you will need to download this .svg file (size: 518 bytes in .zip) which controls the filter. Upload it to the same directory as your .css stylesheet.

Image with a static grayscale

HTML

<div class="flower">
	<img alt="flower" src="images/flower.jpg" />
</div>

CSS

div.flower img {
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	filter: gray; /* IE5+ */
	-webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */
}

Example

flower

Set image to hover back to colour

Just add the following code to your CSS.

CSS

div.flower img:hover {
	filter: none;
	-webkit-filter: grayscale(0);
}

Example

flower

View more CSS filters on Net Tuts+