How To Alter Images Using CSS Filters

CSS filters allow you to do some funky stuff to HTML elements using only CSS. A fun way to take advantage of this cool tool is to use it to put filters on your images, much like the ones you would add to your images on photo editing applications like Photoshop or Instagram. CSS filter isn’t supported on every browser yet, and it usually has to be used with the -webkit- prefix, but it’s still very useful to be able to apply filters to your photos using only CSS.

The syntax is pretty straightforward. Below, I have an image that I assigned the class of “change-me”. All I have to do is apply the -webkit-filter selector to it and input the desired parameters.

Here’s what “change-me” looks like without any filter:

And here’s how it looks with 10px of blur applied to it:

The blur filter is the only one that takes pixel values. The rest: saturate, contrast, brightness, grayscale, sepia, invert, and opacity take number and/or percentage values.

You can saturate (or de-saturate!) an image using the saturate filter. Use a percentage 0-100% to de-saturate the original image (0% is no saturation, 100% is the saturation value of the original image). If you want to add saturation, you can use any number over 1. The higher the number you use, the more saturated the image will get. Here’s an example of an image with only 30% of its original saturation:

The code for the above image looks like this:

Want your image to look like it’s old or faded? There are CSS filters for that. Use the sepia or grayscale filters (each of which takes percentage values from 0-100) to achieve the desired effect. A filter of grayscale(100%) was used on the example below.

CSS filters also lets you use multiple filters at once. Let’s say you wanted to blur your image and make it a little bit brighter at the same time.  Your CSS code would need to look something like this:

And this is what the filtered image would look like:

Check out this page to learn how to use even more CSS filters.