Style filter Property

Style filter Property


Style Filter Property
It applies graphical effects like blur or color shift to an element. It is used for defining the visual effects of an element. 
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
 
property
 
chrome
 
firefox
 
microsoft edge
 
Opera
 
filter
 
yes
 
yes
 
yes
 
Yes
 
Syntax filter property:
object.style.filter
Set the empty cells property:
object.style.filter="none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()"
Example
Output
 
Click the button to change the color of the image to black and white (100% gray).
 
Property Values
 
Value
 
Description
 
none
 
specifies no effect
 
blur(px)
 
Applies a blur effect to the image. A larger value will create more blur.
 
brightness(%)
 
Adjust the brightness of the image.
0% will make the image completely black. 100% is default and represents the original image. values over 100% will provide brighter results. results with less contrast.
 
contrast(%)
 
Adjust the contrast of the image.
0% will make the image completely black. 100% is default and represents the original image. values over 100% will provide results with less contrast.
 
grayscale(%)
 
Converts the image to grayscale.
0% (0) is default and represents the original image.
100% will make the image completely gray.
 
hue-rotate(deg)
 
Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.
 
invert(%)
 
Inverts the samples in the image.
0% (0) is default and represents the original image.
100% will make the image completely inverted.
 
opacity(%)
 
Sets the opacity level for the image. The opacity-level describes the transparency-level, where:
0% is completely transparent.
100% (1) is default and represents the original image (no transparency).
 
saturate(%)
 
Saturates the image.
0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provide super-saturated results.
 
sepia(%)
 
Converts the image to sepia.
0% (0) is default and represents the original image.
100% will make the image completely sepia.
 
initial
 
Set this property to its default value.
 
inherit
 
Inherits this property from its parent element.

 
Technical Details
 
Version:
 
CSS3