Open In App

Convert an image into grayscale image using HTML/CSS

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to convert an image into a grayscale image using CSS properties. CSS provides a filter property that can be used to apply visual effects to an image. In our case, we can use this property to convert an image into a grayscale image.

The grayscale() filter in CSS can take values between 0 and 1. Here’s what these values represent:

Value

Description

0

Represents no grayscale effect, meaning the image remains in full color.

1 or 100%

Represents full grayscale, making the image completely black and white.

Syntax:

filter: grayscale()

Example 1: In this example, use filter: grayscale(100%) to convert an image into grayscale.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Convert into grayscale image</title>
    <style>
        img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>Grayscale Image</h2>
    <img src=
         width="500px"
         height="250px" alt="filter applied" />
</body>
 
</html>


Output:

grayscale image

Example 2: In this example, use filter: grayscale(1) to convert an image into grayscale.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Convert into grayscale image</title>
    <style>
        img {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }
 
        img:hover {
            -webkit-filter: grayscale(0);
            filter: none;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Grayscale Image</h2>
        <img src=
             width="500px"
             height="250px" alt="filter applied" />
    </center>
</body>
 
</html>


Output:

grayscale image



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads