HTML - DOM Style Object filter Property

Quiz

HTML DOM Style Object filter property adds filter or visual effects to an image.

Syntax

Set the filter property:

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

Get the filter property:

object.style.filter;

Filter Functions

Filter	Description
none	It does not set any filter value.
blur(px)	It applies a blur effect to an image.
brightness(%)	It adjusts the brightness of image. It accepts value from 0%-100% or 0-1 where 1 represents the original image and 0 makes image dark. The values greater than 1 makes the image brighter.
contrast(%)	It adjusts the contrast of image. It accepts value from 0%-100% or 0-1 where 1 represents the original image and 0 makes image dark. The values greater than 1 makes the image less contrast.
drop-shadow	It applies drop shadow effect to an image.It accepts two required and three optional parameters. h-shadow:It is a required parameter which sets the horizontal shadow. The shadow appears on the left side for the negative value. v-shadow:It is a required parameter which sets the horizontal shadow. The shadow appears above of image for the negative value. blur:It is an optional parameter which sets the blur effect to image. spread:It is an optional parameter which sets the shadow to expand where positive value makes the shadow to grow and negative values make it shrink. color:It sets the shadow color.
grayscale(%)	It sets image to grayscale. It accepts value from 0%-100% or 0-1 where 0 represents the original image and 1 makes image completely gray.
hue-rotate(deg)	It applies hue-rotation on the image. It accepts value from 0deg to 360deg where 0deg represents original image.
invert(%)	It inverts the sample image. it accepts value from 0%-100% or 0-1 where 0 represents original image and 1 represents completely inverted image.
opacity(%)	It sets the opacity level for image. It accepts value from 0%-100% or 0-1 where 0 represents complete transparency and 1 represents the original image.
saturate(%)	It saturates the image. It accepts value from 0%-100% or 0-1 where 0 represents complete un-saturated image and 1 represents the original image.
sepia(%)	It sets the image to sepia. It accepts value from 0%-100% or 0-1 where 0 represents original image and 1 represents the completely sepia image.

Return Value

It returns image with applied filters.

Examples of HTML DOM Style Object 'filter' Property

The following examples illustrates different filter property values.

Set filter Value to 'blur', 'brightness' and 'none'

The following example applies blur, none and brightness filters to image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Blur Effect</button>
    <button onclick="funTwo()">Brightness Effect</button>
    <button onclick="funThree()">None</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "blur(2px)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "brightness(0.5)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "none";
        }
    </script>
</body>
</html>

Set filter Value to 'contrast', 'drop-shadow' and 'grayscale'

The following example applies contrast, drop-shadow and grayscale filters to image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Contrast Effect</button>
    <button onclick="funTwo()">Drop-Shadow Effect</button>
    <button onclick="funThree()">Grayscale Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "contrast(0)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "drop-shadow(5px 5px aqua)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "grayscale(1)";
        }
    </script>
</body>
</html>

Set filter Value to 'invert', 'hue-rotate' and 'opacity'

The following example applies invert, hue-rotate and opacity filters to image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Hue-Rotate Effect</button>
    <button onclick="funTwo()">Invert Effect</button>
    <button onclick="funThree()">Opacity Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "hue-rotate(180deg)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "invert(0.5)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "opacity(20%)";
        }
    </script>
</body>
</html>

Set filter Value to 'saturate' and 'sepia'

The following example applies saturate and sepia filters to image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Saturation Effect</button>
    <button onclick="funTwo()">Sepia Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "saturate(0)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "sepia(1)";
        }
    </script>
</body>
</html>

Supported Browsers

Property
filter	Yes 53	Yes 12	Yes 35	Yes 9.1	Yes 40

html_dom.htm

Print Page