asp.net.ph

Skip Navigation LinksAbakada: Back to Basics > Language References > CSS Properties > Filter Functions > Brightness Filter Effect

Brightness Filter Effect


Sets the level of brightness for an input image.

Syntax:

{ filter: brightness(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 brightness( ) CSS function adjusts a visual object’s brightness level, effectively making the image appear brighter or darker.

The passed parameter defines the amount of deviation from the element’s default brightness value.

A value of 1 or 100% leaves the input unchanged, while a value of 0 or 0% renders the input image completely dark ( no brightness ).

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

Brightness with values between 0 and 1 or between 0% and 100%.

filter: brightness(0.5)
filter: brightness(1)
filter: brightness(1.5)
filter: brightness(30%)
filter: brightness(60%)
filter: brightness(120%)

Brightness with value = 0 and with negative value.

filter: brightness(0)
filter: brightness(-1)
See Also

blur   contrast   hue-rotate


Check out related books at Amazon

© 2025 Reynald Nuñez and asp.net.ph.

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