CSS contrast() Function
contrast() function to adjust the contrast of an image.
contrast() function is used with the
filter property to adjust the contrast of an image.
Here's an example using a percentage value to give the image more contrast:
Here's an example using a percentage value to give the image less contrast:
Here's an example using a number:
The official syntax of the
contrast() function is as follows:
A value of
0% results in an image that's completely gray. A value of
100% results in an image that's unchanged. Any amount over
100% produces more contrast.
A number value of
0.5 has the same effect as the percentage value
50%. A value of
1 is the same as
Negative values are not allowed.
The following table provided by Caniuse.com shows the level of browser support for this feature.