Con CSS podemos aplicar filtros simples en elementos HTML, imágenes o videos para cambiar el aspecto como lo hacemos con filtros de Photoshop: sepia, blanco y negro, contraste, brillo...

Los filtros CSS son una característica relativamente nueva de CSS que permite aplicar ciertos efectos de imagen propios de aplicaciones de retoque fotográfico como sepia o variación de contraste al vuelo, sin hacer cambios permanentes sobre una imagen.

Dichos filtros funcionan a través de la propiedad filter, a la cuál hay que especificarle una función concreta de las existentes, como por ejemplo la función de blanco y negro (grayscale):

img {
    filter: grayscale(75%);
}

Funciones de filtros

Existen varias funciones disponibles para utilizar con la propiedad filter:

Función Significado Valor Descripción
grayscale Escala de blanco y negro porcentaje 0% = original, 100% = B&N
blur Grado de difuminado píxeles Radio de desenfoque (en píxeles)
sepia Grado de color sepia porcentaje 0% = original, 100% = sepia
saturate Grado de saturación porcentaje 0% = B&N, 100% = original, permite >100%
opacity Grado de transparencia porcentaje 0% = invisible, 100% = visible
brightness Brillo porcentaje 0 = negro, 100% = original, permite >100%
contrast Contraste porcentaje 0 = gris, 100% = original, permite >100%
hue-rotate Rotación de color (matiz) grados 0 ó 360deg = original
invert Invertir porcentaje 0% original, 100% = invertido
drop-shadow Sombra idéntica x y blur color (Ver apartado de sombras)

Nota: Se pueden utilizar indistintamente porcentajes o valores numéricos entre 0 y 1. Por ejemplo, filter:contrast(0.5) es lo mismo que filter:contrast(50%). Debido al estado del soporte de esta característica se recomienda utilizar autoprefixer.

Estas propiedades permiten alterar los colores, tonalidades o diferentes aspectos visuales, muy similares a los efectos de cualquier programa de diseño gráfico. Por ejemplo, la rotación de colores (hue-rotate) se representa mediante una rueda de colores, donde el grado definido especifica el matiz que se le da a los colores, pudiendo alterarlo ligera o intensamente:

Rotación de colores (Matiz HUE)

La función opacity ya existe en CSS fuera de los filtros CSS que vemos en este apartado. Puede utilizarse independientemente, con el siguiente formato: opacity: 0.75.

Modos de fusión

Mediante la propiedad mix-blend-mode también se pueden utilizar los denominados modos de fusión, muy comunes en programas profesionales de retoque fotográfico como Photoshop, para aplicar sobre elementos de contenido, como imágenes o similares. Por otro lado, también se puede utilizar la propiedad background-blend-mode para aplicar el modo de fusión a las imágenes de fondo utilizadas con la propiedad background-image o background.

body {
  background:green;
}

img {
  mix-blend-mode:multiply;
}

Entre los diferentes modos de fusión que podemos utilizar están los siguientes:

Modo de fusión Significado
normal Sin modo de fusión.
multiply Multiplicar.
screen Trama.
overlay Superponer.
darken Oscurecer.
lighten Aclarar.
color-dodge Sobreexponer color.
color-burn Subexponer color.
hard-light Luz fuerte.
soft-light Luz suave.
difference Diferencia.
exclusion Exclusión.
hue Tono.
saturation Saturación.
color Color.
luminosity Luminosidad.

Podemos hacer uso de la propiedad isolation con valor auto o isolate, para que, en el último caso, se proteja un elemento de la mezcla de fusión y aislarlo sin que se aplique.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).