Using CSS3 Filters for Photoshop Like Effects

With just a few lines of CSS, you can apply several visual effects to any image on your website without using Photoshop or JavaScript. CSS filters offer the ability to execute site wide or page specific image modifications; that can save you time and requests for graphic design assistance.

Currently, the filter property offers 10 style variations, but we’re going to focus on the three most widely used elements: grayscale, blur, and opacity.

Grayscale CSS3 Filter

The grayscale filter enables you to transform color images (0% value) into black & white images (100% value), or something in between (< 100%). Using this effect is a great way to change the mood and feel of an image.

Note: a value of 0% mutes the effect and negative values are not allowed.

img.blackandwhite { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

Blur CSS3 Filter

The blur filter property applies a Gaussian smoothing blur. The greater the value, the more blur is applied. Using this effect allows you to nicely soften distinct features contained in an image (ideal of header images).

Note: only numeric pixel values are allowed (no percentage values).

img.blur { -webkit-filter: blur(5px); filter: blur(5px); }

Opacity CSS3 Filter

The opacity filter property modifies the level of which an image is transparent. The higher the value uses, the more transparent the image becomes (see through). Using this effect allows you to make foreground images blend nicely with background imagery and/or colors.

Note: negative values are not allowed and a value of 100% leaves the image unchanged.

img.seethrough { -webkit-filter: opacity(30%); filter: opacity(30%); }

If you’re interested in learning more about all 10 filters, here is the complete list of CSS3 Filters:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

Leave us a comment on how you have or plan to use CSS filters on a personal or client website. Don’t forget to include the link, so we can see your CSS handy work 🙂