How to transform an image to greyscale with CSS
Intro:
In CSS, you can easily transform an image to greyscale with just a few lines of code. This effect can add a vintage or dramatic feel to your website design.
Syntax:
To apply the greyscale effect on an image, use the filter property with the value grayscale(100%). The value 100% means the image will be fully converted to greyscale.
Example:
Let’s say we have an image in our HTML with the class “my-image”. To apply the greyscale effect, we can use the following code:
“`
.my-image{
filter: grayscale(100%);
}
“`
In the above code, we have defined a style for the class “my-image” and applied the filter property with the value grayscale(100%) to transform the image to greyscale.
External Resource:
To learn more about the filter property and other effects you can apply with it, check out the MDN web docs page: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Written by: Steven Iversen 22-06-2023 Written in: CSS tutorials