Brillo y contraste: brightness y contrast

Los filtros CSS permiten aplicar efectos visuales a los elementos de una página. Suelen aplicarse a imágenes, fondos o bordes, aunque también pueden usarse con otros elementos.

Los filtros se aplican antes de mostrar el elemento, por lo que su cantidad puede influir en el tiempo que tarda el navegador en dibujar la página.

Los filtros se definen con la propiedad filter. Vamos a conocerlos.

Brillo: brightness. Admite valores numéricos a partir de 0 o porcentajes. Con un valor de 1 o 100%, el elemento se muestra sin cambios.

.effect {
  filter: brightness(2); /* duplica el brillo */
  filter: brightness(10%); /* reduce el brillo al 10% */
  filter: brightness(150%); /* aumenta el brillo un 50% */
}

Contraste: contrast. Al igual que el filtro de brillo, admite números o porcentajes.

.effect {
  filter: contrast(0.5); /* reduce el contraste a la mitad */
  filter: contrast(50%); /* también reduce el contraste al 50% */
 }

Los filtros CSS son compatibles con estos navegadores.