Easily make images grayscale with CSS

A super useful addition that arrived with CSS3 is filters. Filters make manipulating images really simple; no longer does the image need to be changed prior to use in WordPress in an image editing application such as Adobe Photoshop. A variety of filters are available such as blurring an image, creating a drop-shadow, changing the brightness and making an image grayscale (among other filters).

Using the CSS3 grayscale filter

As an example, here is how the grayscale filter is used.

1. In your stylesheet (style.css in WordPress) add the following:

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

2. Insert the full colour image into your Page or Post as per normal.
3. Click the inserted image and then click the ‘Edit Image’ icon that appears.
4. Click ‘Advanced Settings’
5. Add  gegrayscale after any content already in the CSS Class field.
6. Save changes.

When you publish or update the Page or Post your image will now show in grayscale.