The DOM Style filter Property in HTML DOM is used to add visual effects or filter effects to images.
Syntax:
object.style.filter
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.
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Aug, 2022
Like Article
Save Article