Today’s trick is a simple one, we will use only CSS filters to achieve this effect.
The procedure consists of 2 steps:
- We make the image composed only of 2 colors and the shades of grey between those 2 colors(black and white)
- 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: