brightness()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde septiembre de 2016.
La función brightness() 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 id="default-example">
<img
class="transition-all"
id="example-element"
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
css
brightness(0%) /* Completamente negro */
brightness(0.4) /* 40% de brillo */
brightness(1) /* Sin Efecto */
brightness(200%) /* Doble de Brillo */