Convert an image to grayscale in HTML CSS

Question

Is there a simple way to display a color bitmap in grayscale with just HTML CSS   It doesn t need to be IE-compatible  and I imagine it won t be  -- if it works in FF3 and or Sf3  that s good enough for me   I know I can do it with both SVG and Canvas  but that seems like a lot of work right now     Is there a truly lazy person s way to do this

User · Answer

For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Applied on this markup:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

For more demos, checkout IE testdrive's CSS3 Graphics section and this old IE blog http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

User · Answer

If you  or someone else facing a similar problem in future are open to PHP   I know you said HTML CSS  but maybe you are already using PHP in the backend  Here is a PHP solution   I got it from the PHP GD library and added some variable to automate the process      lt  php  img    imagecreatefromgif  php gif     if   img   img height   imagesy  img   if   img   img width   imagesx  img       Create image instances  dest   imagecreatefromgif  php gif     src   imagecreatefromgif  php gif        Copy and merge - Gray   20  imagecopymergegray  dest   src  0  0  0  0   img width   img height  20       Output and free from memory header  Content-Type  image gif    imagegif  dest    imagedestroy  dest   imagedestroy  src      gt

User · Answer

Support for CSS filters has landed in Webkit   So we now have a cross-browser solution    x000D   x000D  img   x000D    filter  gray     IE6-9    x000D    -webkit-filter  grayscale 1      Google Chrome  Safari 6   amp  Opera 15     x000D    filter  grayscale 1      Microsoft Edge and Firefox 35     x000D    x000D   x000D     Disable grayscale on hover    x000D  img hover   x000D    -webkit-filter  grayscale 0   x000D    filter  none  x000D    x000D   lt img src  http   lorempixel com 400 200   gt  x000D   x000D   x000D      What about Internet Explorer 10   You can use a polyfill like gray

User · Answer

For Firefox you don t need to create a filter svg file  you can use data URI scheme   Taking up the css code of the first answer gives   filter  url  data image svg xml utf8  lt svg 20xmlns  http   www w3 org 2000 svg  gt  lt filter 20id  grayscale  gt  lt feColorMatrix 20type  matrix  20values  0 3333 200 3333 200 3333 200 200 200 3333 200 3333 200 3333 200 200 200 3333 200 3333 200 3333 200 200 200 200 200 201 200   gt  lt  filter gt  lt  svg gt  grayscale       Firefox 3 5     filter  grayscale 100       Current draft standard    -webkit-filter  grayscale 100       New WebKit    -moz-filter  grayscale 100    -ms-filter  grayscale 100     -o-filter  grayscale 100    filter  gray     IE6       Take care to replace  utf-8  string by your file encoding   This method should be faster than the other because the browser will not need to do a second HTTP request

User · Answer

Maybe this way help you  img       -webkit-filter  grayscale 100       Chrome  Safari  Opera        filter  grayscale 100        w3schools org

User · Answer

If you are able to use JavaScript  then this script may be what you are looking for  It works cross browser and is working fine for me so far  You can t use it with images loaded from a different domain   http   james padolsey com demos grayscale

User · Answer

You can use one of the functions of jFunc - use the function  jFunc CanvasFilterGrayscale  http   jfunc com jFunc-functions aspx

User · Answer

Here s a mixin for LESS that will let you choose any opacity  Fill in the variables yourself for plain CSS at different percentages   Neat hint here  it uses the saturate type for the matrix so you don t need to do anything fancy to change the percentage    saturate  value 0         percent  percentage  value        filter  url  data image svg xml utf8  lt svg 20xmlns  http   www w3 org 2000 svg  gt  lt filter 20id  grayscale  gt  lt feColorMatrix 20type  saturate  20values   value   gt  lt  filter gt  lt  svg gt  grayscale       Firefox 3 5         filter  grayscale  percent      Current draft standard        -webkit-filter  grayscale  percent      New WebKit        -moz-filter  grayscale  percent       -ms-filter  grayscale  percent       -o-filter  grayscale  percent       Then use it   img desaturate       transition  all 0 2s linear       saturate 0        amp  hover            saturate 1

User · Answer

Simplest way to achieve grayscale with CSS exclusively is via the filter property   img       -webkit-filter  grayscale 100       Safari 6 0 - 9 0        filter  grayscale 100        The property is still not fully supported and still requires the -webkit-filter property for support across all browsers

User · Answer

You don t need use so many prefixes for full use  because if you choose prefix for old firefox  you don t need use prefix for new firefox   So for full use  enough use this code   img grayscale       filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt 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    gt  lt  filter gt  lt  svg gt  grayscale       Firefox 10   Firefox on Android        filter  gray     IE6-9        -webkit-filter  grayscale 100       Chrome 19   Safari 6   Safari 6  iOS       img grayscale disabled       filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0    gt  lt  filter gt  lt  svg gt  grayscale        filter  none      -webkit-filter  grayscale 0

User · Answer

Doesn t look like it s possible  yet   even with CSS3 or proprietary -webkit- or -moz- CSS properties   However  I did find this post from last June that used SVG filters on HTML  Not available in any current browser  the demo hinted at a custom WebKit build   but very impressive as a proof of concept

User · Answer

Based on robertc s answer  To get proper conversion from colored image to grayscale image instead of using matrix like this  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  You should use conversion matrix like this  0 299 0 299 0 299 0 0 587 0 587 0 587 0 0 112 0 112 0 112 0 0     0     0     1  This should work fine for all the types of images based on RGBA  red-green-blue-alpha  model  For more information why you should use matrix I posted more likely that the robertc s one check following links   The luminance and colour difference signals Margus s answer for question   quot greyscalevalue in colorvalue quot   stackoverflow part  Edit 2   Hans Passant Charles A  Bouman - Purdue university - Analog TV page 20  amp  21 And here you can find some C  and VB codes

User · Answer

For grayscale as a percent in Firefox  use saturate filter instead   search for  saturate    filter  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  gt  lt filter id  saturate  gt  lt feColorMatrix in  SourceGraphic  type  saturate  values  0 2    gt  lt  filter gt  lt  svg gt  saturate

User · Answer

A new way to do this has been available for some time now on modern browsers   background-blend-mode allows you to get some interesting effects  and one of them is grayscale conversion  The value luminosity   set on a white background  allows it   hover to see it in gray    x000D   x000D   test   x000D    width  300px  x000D    height  200px  x000D      background  url  http   placekitten com 1000 750    white   x000D      background-size  cover  x000D    x000D   x000D   test hover   x000D      background-blend-mode  luminosity  x000D    x000D   lt div class  test  gt  lt  div gt  x000D   x000D   x000D    The luminosity is taken from the image  the color is taken from the background  Since it is always white  there is no color   But it allows much more   You can animate the effect setting 3 layers  The first one will be the image  and the second will be a white-black gradient  If you apply a multiply blend mode on this  you will get a white result as before on the white part  but the original image on the black part  multiply by white gives white  multiplying by black has no effect    On the white part of the gradient  you get the same effect as before  On the black part of the gradient  you are blending the image over itself  and the result is the unmodified image   Now  all that is needed is to move the gradient to get this effect dynamic   hover to see it in color    x000D   x000D  div   x000D      width  600px  x000D      height  400px  x000D    x000D   x000D   test   x000D      background  url  http   placekitten com 1000 750     x000D  linear-gradient 0deg  white 33   black 66    url  http   placekitten com 1000 750     x000D      background-position  0px 0px  0px 0   0px 0px  x000D      background-size  cover  100  300   cover  x000D      background-blend-mode  luminosity  multiply  x000D      transition  all 2s  x000D    x000D   x000D   test hover   x000D      background-position  0px 0px  0px 66   0px 0px  x000D    x000D   lt div class  test  gt  lt  div gt  x000D   x000D   x000D    reference  compatibility matrix

User · Answer

It s in fact easier to do it with IE if I remember correctly using a proprietary CSS property  Try this FILTER  Gray from http   www ssi-developer net css visual-filters shtml  The method by Ax simply makes the image transparent and has a black background behind it  I m sure you could argue this is grayscale   Although you didn t want to use Javascript  I think you ll have to use it  You could also use a server side language to do it

User · Answer

In Internet Explorer use the filter property   In webkit and Firefox there is currently no way to desatuarte an image solely with CSS  so you will need to use either canvas or SVG for a client side solution   But I think using SVG is more elegant  check out my blog post for the SVG solution that works for both Firefox and webkit  http   webdev brillout com 2010 10 desaturate-image-without-javascript html  And strictly speaking since SVG is HTML the solution is pure html css  -

User · Answer

Try this jquery plugin  Although  this is not a pure HTML and CSS solution  but it is a lazy way to achieve what you want  You can customize your greyscale to best suit your usage  Use it as follow       myImageID   tancolor      There s an interactive demo  You can play around with it   Check out the documentation on the usage  it is pretty simple  docs

User · Answer

support for native CSS filters in webkit has been added from the current version 19 0 1084 46  so -webkit-filter  grayscale 1  will work and which is easier than SVG approach for webkit

User · Answer

One terrible but workable solution  render the image using a Flash object  which then gives you all the transformations possible in Flash   If your users are using bleeding-edge browsers and if Firefox 3 5 and Safari 4 support it  I don t know that either do will   you could adjust the CSS color-profile attribute of the image  setting it to a grayscale ICC profile URL  But that s a lot of if s

User · Answer

As a complement to other s answers  it s possible to desaturate an image half the way on FF without SVG s matrix s headaches    lt feColorMatrix type  saturate  values   v    gt    Where  v is between 0 and 1  It s equivalent to filter grayscale 50      Live example    x000D   x000D   desaturate   x000D      filter  url   desaturate    x000D      -webkit-filter  grayscale 50    x000D    x000D  figcaption  x000D      background  rgba 55  55  136  1   x000D      padding  4px 98px 0 18px  x000D      color  white  x000D      display  inline-block  x000D      border-top-left-radius  8px  x000D      border-top-right-radius  100   x000D      font-family   Helvetica   x000D    x000D   lt svg version  1 1  xmlns  http   www w3 org 2000 svg  gt  x000D     lt filter id  desaturate  gt  x000D      lt feColorMatrix type  saturate  values  0 4   gt  x000D     lt  filter gt  x000D   lt  svg gt  x000D   x000D   lt figure gt  x000D     lt figcaption gt Original lt  figcaption gt  x000D     lt img src  http   www placecage com c 500 200   gt  x000D     lt  figure gt  x000D   lt figure gt  x000D     lt figcaption gt Half grayed lt  figcaption gt  x000D     lt img class  desaturate  src  http   www placecage com c 500 200   gt  x000D   lt  figure gt  x000D   x000D   x000D    Reference on MDN

User · Answer

be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags     Absolute positionning hover an  img  or text area wich needs no click nor selection  can closely mimic effects of color scale   via rgba   or translucide png    It will not give one single color scale  but will shades color out of range   test on code pen with 10 different colors via pseudo-element  last is gray   http   codepen io gcyrillus pen nqpDd  reload to switch to another image

User · Answer

Following on from brillout com s answer  and also Roman Nurik s answer  and relaxing somewhat the the  no SVG  requirement  you can desaturate images in Firefox using only a single SVG file and some CSS   Your SVG file will look like this    lt  xml version  1 0  encoding  UTF-8   gt   lt svg version  1 1       baseProfile  full       xmlns  http   www w3 org 2000 svg  gt       lt filter id  desaturate  gt           lt 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   gt       lt  filter gt   lt  svg gt    Save that as resources svg  it can be reused from now on for any image you want to change to greyscale   In your CSS you reference the filter using the Firefox specific filter property    target       filter  url resources svg desaturate       Add the MS proprietary ones too if you feel like it  apply that class to any image you want to convert to greyscale  works in Firefox  3 5  IE8    edit   Here s a nice blog post which describes using the new CSS3 filter property in SalmanPK s answer in concert with the SVG approach described here   Using that approach you d end up with something like   img desaturate      filter  gray     IE        -webkit-filter  grayscale 1      Old WebKit        -webkit-filter  grayscale 100       New WebKit        filter  url resources svg desaturate      older Firefox        filter  grayscale 100       Current draft standard        Further browser support info here

User · Answer

If you re willing to use Javascript  then you can use a canvas to convert the image to grayscale  Since Firefox and Safari support  lt canvas gt   it should work   So I googled  canvas grayscale   and the first result was http   www permadi com tutorial jsCanvasGrayscale index html which seems to work

User · Answer

Just got the same problem today  I ve initially used SalmanPK solution but found out that effect differs between FF and other browsers  That s because conversion matrix works on lightness only not luminosity like filters in Chrome IE   To my surprise I ve found out that alternative and simpler solution in SVG also works in FF4  and produces better results    lt svg xmlns  http   www w3 org 2000 svg  gt     lt filter id  desaturate  gt       lt feColorMatrix type  saturate  values  0   gt     lt  filter gt   lt  svg gt    With css   img       filter  url filters svg desaturate      Firefox 3 5         filter  gray     IE6-9        -webkit-filter  grayscale 1      Google Chrome  amp  Safari 6         One more caveat is that IE10 doesn t support  filter  gray   in standards compliant mode anymore  so needs compatibility mode switch in headers to work    lt meta http-equiv  X-UA-Compatible  content  IE 9    gt

User · Answer

Update  I made this into a full GitHub repo  including JavaScript polyfill for IE10 and IE11  https   github com karlhorky gray  I originally used SalmanPK s answer  but then created the variation below to eliminate the extra HTTP request required for the SVG file  The inline SVG works in Firefox versions 10 and above  and versions lower than 10 no longer account for even 1  of the global browser market   I have since been keeping the solution updated on this blog post  adding support for fading back to color  IE 10 11 support with SVG  and partial grayscale in the demo   img grayscale        Firefox 10   Firefox on Android      filter  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  gt  lt filter id  grayscale  gt  lt 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   gt  lt  filter gt  lt  svg gt  grayscale          IE 6-9      filter  gray        Chrome 19   Safari 6   Safari 6  iOS      -webkit-filter  grayscale 100       img grayscale disabled     filter  none    -webkit-filter  grayscale 0

[image] Convert an image to grayscale in HTML/CSS

Examples related to image

Examples related to css

Examples related to grayscale