Home > Tips & Tutorials > 4 CSS Filters For Adjusting Color

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.

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

The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.

Leave a Reply

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