The HTML DOM Style filter property is used for defining visual effects to an element.
Following is the syntax for −
Setting the filter property −
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
The above property values are explained as follows −
| Filter | Description |
|---|---|
| none | Thisspecifies no effects. |
| blur(px) | Thisapplies the blur effect. |
| brightness(%) | Foradjusting the image brightness. Takes value from 100%(originalimage) to above. |
| contrast(%) | Foradjusting the image contrast. Takes value ranging from0%(completely black),100%(original image) and above 100% it willbe less contrast.. |
| drop-shadow(h-shadowv-shadow blur spread color) | Forapplying drop shadow to an image. |
| grayscale(%) | Forconverting image to grayscale with 0% representing original imageand 100% making it completely grey. |
| hue-rotate(deg) | Forapplying hue rotation to the image with the degrees given asparameter. The default value is 0 degree representing the originalimage and can go up to 360deg. |
| invert(%) | Forinverting the samples in the image. |
| opacity(%) | Forsetting opacity level for the image ranging from 0% (Completelytransparent) to 100%(original image and default value). |
| saturate(%) | Saturatesthe image. |
| sepia(%) | Convertsthe image to sepia. |
Let us look at an example for the filter property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter ="sepia(40%)";
document.getElementById("Sample").innerHTML="The grayscale filter is now applied to above image";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics- mini-logo.jpg">
<p>Change the above image filter property by clicking the below button</p>
<button onclick="changeFilter()">Change Filter</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Filter” button −
