 Abakada: Back to Basics > Language References > CSS Properties > Filter Functions > Contrast Filter Effect
Sets the level of contrast for an input image.
{ filter: contrast(number | percentage) }
| number |
Absolute positive floating-point number or a relative percentage value. |
The property is read/write with a default value of 1.
The contrast( ) CSS function adjusts a visual object’s contrast level, effectively increasing or decreasing the degree of difference between the object’s bright and dark tones.
The passed parameter defines the amount of deviation from the element’s default contrast value.
A value of 1 or 100% leaves the input unchanged, while a value of 0 or 0% renders the input image completely gray ( no contrast ).
Values less than 1 ( or <100% ) reduces the effect, while values more than 1 ( or >100% ) increases the effect.
Negative values ( < 0 ) are ignored and render the element unchanged.
Contrast with values between 0 and 1 or between 0% and 100%.
filter: contrast(0.5) |
filter: contrast(1) |
filter: contrast(1.5) |
 |
|
|
filter: contrast(30%) |
filter: contrast(60%) |
filter: contrast(120%) |
|
|
|
Contrst with value = 0 and with negative value.
filter: contrast(0) |
filter: contrast(-1) |
|
|
blur brightness hue-rotate
|