Forcing browsers to print all pages in grayscale

Slightly updated on 2014/05/27

Very short snipplet, but very effective.

With Chrome 18 CSS3 filters are finally implemented and you can do amazing stuff with them. One thing we tried and which we found rather useful than fancy is to force Chrome printing all content on your website in grayscale.

And this is the code:

@media print {
  body {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* future-proof */
  }
}

And that's it!

Update

And for the record, here is the full flegded version covering all major browsers:

@media print {
  body {
    /* IE4-8 and 9 (deprecated). Thanks Travis for the tip! */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5,
       Safari 5.2 and Opera 11.6 -- does not
       need to be prefixed. See below */
    filter: url('#grayscale');
    /* CSS3 filter */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* future-proof */
  }
}

And here's the SVG Markup for the grayscale filter:

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                       0.3333 0.3333 0.3333 0 0
                                       0.3333 0.3333 0.3333 0 0
                                       0 0 0 1 0"/>
 </filter>
</svg>

Related Articles

• March 6, 2018 | Tooling, CSS From Medium: Deconfusing Pre- and Post-processing
• March 5, 2018 | Tooling, CSS From Medium: PostCSS misconceptions
• June 27, 2017 | CSS, grid, layout Grid layout, grid layout everywhere!