asp.net.ph

Skip Navigation Links

Contrast Filter Effect

CSS Attributes Index   CSS Filters


Sets the level of contrast for an input image.

Syntax:
{ filter: contrast(number | percentage) }

Possible Values


number Absolute positive floating-point number or a relative percentage value.

The property is read/write with a default value of 1.

Remarks:

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.

Example

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)
See Also

blur   brightness   hue-rotate



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note