{"id":435,"date":"2022-01-16T11:17:59","date_gmt":"2022-01-16T11:17:59","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=435"},"modified":"2022-01-16T11:22:14","modified_gmt":"2022-01-16T11:22:14","slug":"blur-image-using-css-grayscale-brightness-contrast","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/blur-image-using-css-grayscale-brightness-contrast\/","title":{"rendered":"Blur Image using CSS & Filters to make image Grayscale, change Brightness and Contrast"},"content":{"rendered":"\n

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

I this CSS Tutorial for beginners<\/strong>, we will learn What is CSS Filter?<\/a><\/strong> and how to use CSS Filters<\/strong> to:
– Blur Image<\/a>
– Grayscale Image<\/a>
– Change Brightness of Image<\/a>
– Change Contrast of Image<\/a><\/p>\n\n\n\n

Chalo suru kiya jaye!<\/strong>🍻 Lets start! <\/strong>🕺.<\/p>\n\n\n\n

What is CSS Filter?<\/h2>\n\n\n\n

The filter<\/strong> 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:<\/p>\n\n\n\n

filter: <filter method>;<\/code><\/pre>\n\n\n\n
 Blur Image using CSS <\/h2>\n\n\n\n
filter: blur(5px)<\/strong>;<\/code><\/pre>\n\n\n\n
This will apply Gaussian blur<\/strong> effect to the image. 
It requires a radius <\/strong>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.😎<\/p>\n\n\n\n
\"Blur<\/figure>\n\n\n\n
\n