asp.net.ph

Skip Navigation Links

Brightness Filter Effect

CSS Attributes Index   CSS Filters


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



© 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