Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
communitycreator

How to convert an image to grayscale with CSS

NDUKWE CHIDERA K.

Overview

Cascading Style Sheet (CSS) is used to design user interfaces in a visually appealing way.

CSS3 is the latest version that was shipped, and it has a lot of great abilities to make this job easier.

Using CSS, you can produce the black and white version of a colored image.

In the picture below, two variations of the same image are shown. The second image from left to right is the black and white version of the first.

Code

Below is the code used for converting an image to grayscale:

Explanation

  • A free image from unsplash.com was linked to in two different <img> tags, and their height and width were specified.

  • The image with the .img class name was given the filter style with a grayscale(100%) value, and the other one was left normal.

  • This grayscale(100%) value is responsible for changing the colored image to black and white. The grayscale value in CSS reduces the color content of an image, with 100% being the most reduced. To get different gray shades of an image, you will want to keep tampering with the 100% value until you get what you want.

RELATED TAGS

html
css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring