Categories

Basic of CSS Filters

CSS Filters are a powerful property by which we can easily tweak the images in the browser without using photoshop. With the help of CSS Filter, we can achieve the various type of effects in the image like blue, brightness, contrast, grayscale, etc.

CSS Filters are supported by all modern browser.
Crome – 53, Firefox – 35, Safari – 9.1, Opera – 40, IE – 13

In this article, we will show you 10 different types of CSS Filter and combination of these filter.

1. Blur

A Gaussian type blur effect can be created with this filter. A larger value in px will create more blur effect and 0 is used as no blur effect.

2. Brightness

With the help of this filter, Image can be made lighter or darker. Value is used in percentage(%) or decimal, 100% is default value work as a normal image, 0 value will make image completely dark and more than 100% value will make the image brighter.

3.Contrast

This filter will adjust the contrast of the image. With the percentage(%) or decimal value contrast level can be increased or decrease. 100% is default value work as a normal level of contrast, 0 value will make image completely grey and more than 100% value will make image less contrast.

4.Grayscale

This filter will remove colour from the image. The percentage(%) or decimal value is used to increase or decrease the contrast level of grey scale. 0 is default value work as a normal image, 100% value will make image completely black and white. Negative values are not allowed here.

5.Hue-Rotate

Hue-Rotate filter can be used to adjustment Hue/Saturation of the image like Photoshop. The value of angle defines the number of degrees around the colour wheel. 0deg is default value work as the original image and maximum value up to 360 deg.

7.Saturate

This filter will Saturate the image, it will increase the colour level of the image. Increase the percentage(%) or decimal value makes the image effect stronger. 100% is default value work as the original image and 0 value will make image completely un-saturated and more than 100% value will make image super-saturated. Negative values are not allowed here.

8.Sepia

This filter will convert the image to sepia, with the help of this filter we can create the aged look in the image. Increase the percentage(%) or decimal value makes the image effect stronger. 0 is default value work as original image and 100% value will make image completely sepia. Negative values are not allowed here.

9.Opacity

Opacity filter is used to makes the image more or less transparent. This is work like CSS opacity property. Decrease the percentage(%) or decimal value makes the image more transparent. 100% is default value work as the original image and 0 value will make image completely transparent. Negative values are not allowed here.

10. Combining of CSS Filters

Using multiple CSS filters in one declaration will create some wonderful custom effects in images. Some of the examples are shown below.

Vintage Effect in Image

With the combination of contrast, saturate, sepia and grayscale filter ventage effect can be created. You can see the effect on the image by changing the value of this combination.

High-Contrast Grayscale Images

With the combination of contrast, brightness and grayscale filter High-Contrast Grayscale effect can be created. You can see the effect on the image by changing the value of this combination.

Now you have the basic understanding of CSS filter. Uss CSS filter in your next project. Don’t forget to share this article with your friends.

If you would like to write guest posts for Blog Identity, you can contact us on info@blogidentity.com and check our submission guidelines.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *