Icon for post type: learned The Effect of CSS Filter Grayscale Permalink: The Effect of CSS Filter Grayscale Bookmark Icon

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;
}
View of the beach of Tai Long Wan in Hong Kong
Original image
View of the beach of Tai Long Wan in Hong Kong
The same image with the grayscale filter applied

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.


Leave a comment

Replied on your own website? Send a webmention!