property
|
chrome
|
firefox
|
microsoft edge
|
Opera
|
filter
|
yes
|
yes
|
yes
|
Yes
|
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.
|
Version:
|
CSS3
|