Every CSS filter every web designer must know

• August 4th, 2014
• Articles

CSS filters are a great way to enhance and edit photos without the use of Photoshop.They allow you to use pure CSS to apply popular Photoshop style filters such as desaturate, blur, invert etc. It’s very rarely these day that I ever do a web project without incorporating some sort of CSS filter into that project. I’m a huge fan of CSS filters I would love to hear your thoughts, and any experience you may have had using CSS filters in your own projects, In the comments section below.

Compatibility

One of the very few down sides of CSS filters are that they are not supported by all browsers. It’s not compatible with opera, internet explorer, and Firefox, but is supported by two of most popular web browsers chrome and safari.

Preview

This is what the original image looks like without any CSS filters applied to the photo.

Blur filter

The blur filter adds a blur effect to an image.

[css padlinenumbers="true"]<br />.blur-effect img{ <br />-webkit-filter: blur(10px);}<br />[/css]

To increase the the image blur just simply increase the pixels.

Grayscale

This filter converts any image to black and white

[css padlinenumbers="true"]<br />.grayscale img{<br />-webkit-filter: grayscale(100%);}<br />[/css]

To set the grayscale choose 100% to lower the grayscale effect you will need to choose a lower percentage.

Invert

The invert filter reverse the hue, saturation and brightness. A filter effect i use almost all the time when designing in Photoshop, and can now recreate the same effect with CSS.

[css padlinenumbers="true"]<br />.invert  img{ <br />-webkit-filter: invert(100%);}<br />[/css]

Sepia

Is a great way to apply a vintage effect to images, and can be applied using purely CSS.

[css padlinenumbers="true"]<br />.sepia  img{<br />-webkit-filter: sepia(100%);]<br />[/css]

To set the sepia filter choose 100% to lower the sepia effect you will need to choose a lower percentage.

Hue-rotate

A popular filter I use almost all the time in Photoshop. Changing the hue deg will change the colour effect on the photography.

[css padlinenumbers="true"]<br />.hue img {<br />-webkit-filter: hue-rotate(150deg);}<br />[/css]

Brightness

This increases the brightness of an image simply by increasing the percentage.

[css padlinenumbers="true"]<br />.brightness img { <br />-webkit-filter: contrast(150%);}<br />[/css]

Increasing the brightness of an image is done via percentages if you increase the brightness 200% it will make the image twice as bright.

Contrast

The contrast of image can be adjusted with purely CSS.

[css padlinenumbers="true"]<br />.contrast img { <br />-webkit-filter: contrast(200%);}<br />[/css]

0% is black and white 100% returns the original image.

Saturate

This is a popular Photoshop filter, very popular used in photography retouching. The filter is perfect for increasing saturation on underexposed photos.

[css padlinenumbers="true"]<br />.saturate img {<br />-webkit-filter: saturate(250%);}[/css]