Convert colorful image into Black or White or Greyscale using CSS filter

Everyone needs to be there website load quickly. For this we need to reduce assets used in the website. If your website usages one image with multiple variables like Black Image or White Image or Greyscale Image then no need to use multiple images for this. You can convert a single image in multiple variables from CSS itself.  

Let discuss one by one with different variations of an image using CSS.

1. Black Image using CSS:

To convert an image in black format you need to reduce the image brightness to 0.

filter: brightness(0);

Original:

<img src="https://devstudioonline.com/public/assets/front/images/logo.png" />

Black image:

<img src="https://devstudioonline.com/public/assets/front/images/logo.png" style="filter:brightness(0);" />

2. White Image using CSS:

Invert black image to make it white.

filter: brightness(0) invert(1);

White image:

3. Greyscale Image using CSS:

Use grayscale filter on an image to make it grayscale.

filter: grayscale(100%);

White image:

4. Blur Image using CSS:

Use blur filter on an image to make it blur.

filter: blur(3px);

Blur image:

Some other useful filters are:

blur(5px)

brightness(200%)

contrast(200%)

drop-shadow(8px 8px 10px gray)

grayscale(100%)

hue-rotate(90deg)

invert(100%)

opacity(30%)

saturate(8)

sepia(100%)

contrast(200%) brightness(150%)