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