Using CSS3 Filters for Photoshop Like Effects

CSS3 Filters

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%); }
Grayscale CSS3 Filter

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); }
Blur CSS3 Filter

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%); }
Opacity CSS3 Filter

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 🙂


0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
7 years ago

I had a client that wanted to rebrand their website with black-and-white images. They had thousands of color images and I was able to change them all with grayscale 100%. They assumed they’d have to pay me or someone else to open up every single image and converted to grayscale in Photoshop. Needless to say they were stunned that I could get this done in a minute.

Would love your thoughts, please comment.x