1 June 2016

Grayscale, sepia and other filter in pure CSS

Another straight to the point solution

Grayscale effect:

img 
{
    -webkit-filter: grayscale(100%); /* for older Safari */
    filter: grayscale(100%);
}

Color inversion:

img
{
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

Saturation:

img
{
    -webkit-filter: saturate(250%);
    filter: saturate(250%);
}

Sepia:

img
{
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

Black&white:

img
{
    -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
    filter: grayscale(100%) brightness(10%) contrast(100%);
}

Comments