4 CSS Filters For Adjusting Color

SVG offers a non-destructive way to change some color properties of an image or graphic. Unfortunately some of those changes are more cumbersome to make than others. CSS filters allow you to non-destructively change some properties of color as well and in a less cumbersome way than SVG.

Thank you for reading this post, don't forget to subscribe!

The last couple of weeks I’ve been talking about CSS filters as an alternative to SVG filters. First I offered an introduction and showed you an example of the blur() filter-function and then I walked through the url() and drop-shadow() filter-functions and provided examples for each.

Today I want to walk you through four more CSS filter-functions all of which are shortcuts to different types and values of the SVG filter primitive feColorMatrix.

The feColorMatrix Filter Primitive

The feColorMatrix primitive can be used as a general way to change some of the fundamental properties of color in an element. As the name implies, the primitive makes use of a matrix of values to add different filter effects.

Four different CSS filter-functions exist to replicate effects you can create with feColorMatrix. It’s one example where a single SVG primitive can do more than any one CSS filter-function.

Here are the four CSS filters.

  • grayscale()
  • hue-rotate();
  • saturate();
  • sepia();

Let’s walk through each of them and change the colors of what is likely a familiar image, if you’ve been following along with this series.

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *