CSS filters offer a variety of simple effects you can add to an image, saving you the work of having to manipulate the actual graphic files. We can easily apply filters to an image using the following available properties. Here is what the syntax for some pre defined functions looks like.

filter: blur(10px);
filter: brightness(0.6);
filter: contrast(150%);
filter: drop-shadow(16px 16px 20px black);
filter: grayscale(50%);
filter: hue-rotate45deg);
filter: invert(75%);
filter: opacity(35%);
filter: saturate(40%);
filter: sepia(80%);

To demonstrate here is an image with a few of the different filters applied to it. Keep in mind that this is the same image file, we are simply applying the CSS filter property with one of the functions above to our html img tag.

No Effect

Blur 2px

Brightness 1.5

Sepia 80%

If you want more complex effects you can employ SVG filters. To learn more about SVG filters visit the Mozilla Dev CSS Filters Web Doc.

If you’d like to dive deeper into filters here is (yet another) a great article from CSS Tricks. As always, you should check your browser usability, filters have pretty solid support with the exception of IE11 and below.