HTML | DOM Style filter Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
             alt="Mountain View" width="300" height="250">
  
        <script>
            function img() {
  
                document.getElementById(
                    "gfg").style.filter = "grayscale(100%)";
  
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before clicking on the button:

After clicking on the button:

Example-2: Set the filter property to Opacity.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
             alt="Mountain View" width="300" height="250">
  
        <script>
            function img() {
  
                document.getElementById(
                    "gfg").style.filter = "opacity(50%)";
  
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before clicking on the button:

After clicking on the button:

Example-3: Set the filter property to Invert.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
             alt="Mountain View" width="300" height="250">
  
        <script>
            function img() {
  
                document.getElementById(
                    "gfg").style.filter = "invert(100%)";
  
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before clicking on the button:

After clicking on the button:

Browser Support: The browsers supported by HTML DOM Style filter property are listed below:

  • Google Chrome 53.0
  • Internet Explorer 13.0
  • Firefox 35.0
  • Opera 40.0
  • Safari 9.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.