Helpful CSS Filters

Not quite the trend anymore, yet a client wanted to see their partner logos display in grayscale and only turn colored when hovering the logos. Well, obviously I wouldn't want to use two different images for that—it reminds me so much of the early days of Dreamweaver - MM_swapImage(), anyone? ;) Instead I used the CSS filter property to adjust the rendering of the images.

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Good thing there is the CSS filter property luckily includes a grayscale function that does exactly what I needed.

The following renders an image at a 70% grayscale value. 100% renders the image as a full grayscale image. The values can be either a percentage or a number, e.g. 0.7.

filter: grayscale(70%);

filter: grayscale(0.7);

There are a few more functions for the CSS filter property. Personally I haven’t come across many use cases where I’d need them, but some are really fun just to try out. My fun favorite is hue-rotate(<angle>) which does the following:

Applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.

The other available filters include blur, brightness, contrast, drop-shadow, hue-rotate, invert, opacity, saturate and sepia. The documention and examples can be found on MDN or the official spec for Filter Effects Module Level 1.