How to create a black and white image effect with CSS filters

Today’s trick is a simple one, we will use only CSS filters to achieve this effect.

The procedure consists of 2 steps:

1. We make the image composed only of 2 colors and the shades of grey between those 2 colors(black and white)
2. We increase the contrast on this grayscale image till there is no grey shades, only white and black

First step: Make the image grey-scaled

img {
    filter: grayscale(1)
}

Second step: Apply high contrast

img {
    filter: grayscale(1) contrast(1000);
}

That’s it. Enjoy the trick and change the contrast value as you see it fit in your case !

If you want to see it in action, take a look on it on my Youtube channel:

0