The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Forcing Grayscale Printing

Last updated on:

At the time of this writing, this will only work in Chrome 18+, but it's standardized so support will eventually come to everywhere.

@media print {
  body {
    /* IE4-8 and 9 (deprecated). */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, 
       Safari 5.2 and Opera 11.6 */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for
       future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */

Reference URL


  1. Xavi
    Permalink to comment#

    I was trying to use this code in my blog social icons but it’s not working well:

    Chrome – great result, the icon appears in grayscale
    IE – the icon appears with color
    Firefox – the icon doesn’t appear at all

    I think it’s this line that doesn’t work:

    filter: url('#grayscale'); 

    I have the svg filter when the body tag opens as defined in the referenced url.

    Any idea how to solve it?

  2. Arul
    Permalink to comment#

    for me its not working for IE10 how to make it for IE10

  3. Rooba
    Permalink to comment#

    Not working for ie 10

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed