Open In App
Related Articles

HTML | DOM Style filter Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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=
             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=
             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=
             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
  • Edge 12.0
  • Internet Explorer not supported
  • Firefox 35.0
  • Opera 40.0
  • Safari 9.1


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads