Blur Image using CSS & Filters to make image Grayscale, change Brightness and Contrast

Hello Friends 🙏, Do you know we can blur an image, make image Grayscale 🤯, control Brightness & Contrast of an image and all these cool things by just using CSS 😮.

I this CSS Tutorial for beginners, we will learn What is CSS Filter? and how to use CSS Filters to:
– Blur Image
– Grayscale Image
– Change Brightness of Image
– Change Contrast of Image

Chalo suru kiya jaye!🍻 Lets start! 🕺.

What is CSS Filter?

The filter is a CSS property and using it we can get graphical effects like blur, grayscale and more. This property can be used to change the properties of images, backgrounds or borders.
Belwo is the syntax of using filter:

filter: <filter method>;

Blur Image using CSS

filter: blur(5px);

This will apply Gaussian blur effect to the image.
It requires a radius value, I have given 5px above, so it will deviate 5px of the image on screen. Larger the radius value, larger will be the blur effect.😎

Grayscale Image using CSS

filter: grayscale(100%);

This will convert the image to grayscale 😮.
It requires an amount value, I have given 100% above, so it will make image complete grayscale.😎

Change Brightness of Image using CSS

filter: brightness(50%);

This will make image appear more or less bright.
It requires an amount value, I have given 50% above, so it will reduce the brightness of the image to 50% 😎.

Change Contrast of Image using CSS

filter: contrast(200%);

This will adjust the contrast of the image.
It requires an amount value, I have given 200% above, so it will double the original contrast of an image.😎

There are many methods available to use with filter property, some of them we covered here. Check all other available methods here.

Thanks 🙏.

Liked this tutorial? Check more here -> CSS Turorials.