The Effect of CSS Filter Grayscale

Recently I wrote about the grayscale CSS filter and how I used it for an image hover effect. While I played around with it, I noticed that the filter not only works on the image it‘s applied to, but all of its applied styles as well.

As an example, the following rule will convert the image, as well as all other properties containing a color value to grayscale:

.grayscale {
    filter: grayscale(1);
    padding: 1rem;
    border: thick dashed #d61925;
    background-color: #79c9d4;
}

The effect of all colors being converted does make sense, yet it was slightly unexpected when I first noticed it. So in case you want to keep the colors of your properties as intended, simply wrap the image with another element and apply the filter for the image seperately.