La funciónbrightness()CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un<filter-function>.

Pruébalo

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Sintaxis

brightness(valor)

Parametros

valor

El brillo resultante, es definido como un<number> o un<percentage>. Un valor debajo del100% oscurecerá la imagen, como así un valor superior al100% le dará más brillo. Un valor de0% dará como resultado una imagen completamente negra, siendo el valor de100% una imagen sin cambios. El valor de la Interpolación es1.

Ejemplos

brightness(0%)   /* Completamente negro */brightness(0.4)  /* 40% de brillo */brightness(1)    /* Sin Efecto */brightness(200%) /* Doble de Brillo */

Ver también

• <filter-function>
• blur()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()