Skip to content
Related Articles

Related Articles

HTML | DOM Style filter Property
  • Difficulty Level : Basic
  • Last Updated : 31 Jul, 2019

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:

FilterDescription
noneIt sets the effect to none.
blurIt sets the effect to blur.
brightness(%)It adjusts the brightness.
contrast(%)It adjusts the contrast of the image.
drop-shadowIt sets the effect to drop shadow.
h-shadowIt sets the horizontal shadow.
v-shadowIt sets the vertical shadow.
blurIt sets blur effect in pixels.
spreadIt sets the image to grow and expand.
colorIt 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.






<!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>

Output:
Before clicking on the button:

After clicking on the button:

Example-2: Set the filter property to Opacity.




<!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>

Output:
Before clicking on the button:

After clicking on the button:

Example-3: Set the filter property to Invert.




<!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>

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
Recommended Articles
Page :