HTML | DOM Style filter Property

Last Updated : 08 Aug, 2022

The DOM Style filter Property in HTML DOM is used to add visual effects or filter effects to images.

Syntax:

Return filter property:

object.style.filter

Set filter property:

object.style.filter = "none| blur() |brightness() |contrast() | 
drop-shadow() |grayscale() |hue-rotate() |invert() |opacity() |
saturate() | sepia()"

Functions:

Filter	Description
none	It sets the effect to none.
blur	It sets the effect to blur.
brightness(%)	It adjusts the brightness.
contrast(%)	It adjusts the contrast of the image.
drop-shadow	It sets the effect to drop shadow.
h-shadow	It sets the horizontal shadow.
v-shadow	It sets the vertical shadow.
blur	It sets blur effect in pixels.
spread	It sets the image to grow and expand.
color	It adds color to the shadows.
grayscale(%)	It sets the image to grayscale.
hue-rotate(deg)	It sets hue rotation on the image.
invert(%)	It inverts the samples in the image.
opacity(%)	It sets the opacity level for the image.
saturate(%)	It saturates the image.
sepia(%)	It sets the image to sepia.

Return Value: It returns the image with added visual effects.

Example-1: Set the filter property to Grayscale.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style filter Property
    </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
          GeeksforGeeks
        </h1>
        <button onclick="img()">Press</button>
 
        <h4>
          Clicking on the 'Press' button will 
          set the filter property to grayscale.
        </h4>
 
        <img id="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401113144/gfg_200X2001.png" 
             alt="Mountain View" width="300" height="250">
 
        <script>
            function img() {
 
                document.getElementById(
                    "gfg").style.filter = "grayscale(100%)";
 
            }
        </script>
    </center>
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-2: Set the filter property to Opacity.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style filter Property
    </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
          GeeksforGeeks
          </h1>
        <button onclick="img()">
            Press
        </button>
 
        <h4>
          Clicking on the 'Press' button will 
          set the filter property to grayscale.
        </h4>
 
        <img id="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401113144/gfg_200X2001.png" 
             alt="Mountain View" width="300" height="250">
 
        <script>
            function img() {
 
                document.getElementById(
                    "gfg").style.filter = "opacity(50%)";
 
            }
        </script>
    </center>
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-3: Set the filter property to Invert.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style filter Property
    </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
          GeeksforGeeks
          </h1>
        <button onclick="img()">
            Press
        </button>
 
        <h4>
              Clicking on the 'Press' button will 
              set the filter property to grayscale.
      </h4>
 
        <img id="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401113144/gfg_200X2001.png" 
             alt="Mountain View" width="300" height="250">
 
        <script>
            function img() {
 
                document.getElementById(
                    "gfg").style.filter = "invert(100%)";
 
            }
        </script>
    </center>
</body>
 
</html>