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:

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Categorized in: