Make an image grayscale with colourful drop shadow

In this article, we’re playing around with the CSS filter property. For a single CSS property, filter can drastically change the appearance of web elements. Here, we see how a single line of CSS can make an image grayscale with a colourful drop shadow.

.grayscale-with-colorful-dropshadow {
  filter: grayscale(1) drop-shadow(11px 6px 0px #c747d1);
}

A wacky drop shadow colour prominently stands out behind a grayscale image when the above CSS is applied to our img element. The ordering of the filter functions in the filter property is important here. When the order of the filter functions is swapped like this:

.grayscale-with-colorful-dropshadow {
  filter: drop-shadow(11px 6px 0px #c747d1) grayscale(1);
}

Then the grayscale filter also wipes the colour out of the drop shadow too.

While this is an interesting effect, it is nice to know that CSS filters (get to know more of them on MDN) can be combined in interesting ways.

Try using the CSS Filter Tool and play around with 10 filter functions.

Color scheme: