Filtros CSS para imágenes

Como todos sabemos, CSS dispone de multitud de opciones y utilidades que nos sirven para maquetar nuestra página web según las necesidades del proyecto que estemos desarrollando.

En este caso trataremos los filtros como alternativa a los programas de edición de imágenes, es decir, modificaremos únicamente con CSS una imagen que esté alojada en nuestra página web aplicandole distintos efectos visuales.

Esta es la imagen original sobre la que trabajaremos. La imagen tiene como propiedad la clase «taxi».

Filtro brillo: podemos modificar el porcentaje de brillo

.taxi{
-webkit-filter: brightness(75%);
filter: brightness(75%);
}

Filtro contraste: modicamos el porcentaje de contraste:

.taxi{
-webkit-filter: contrast(250%);
filter: contrast(250%);
}

Filtro satuación: para modificar el nivel de saturación del color de la imagen

.taxi{
-webkit-filter: saturate(300%);
filter: saturate(300%);
}

Filtro desenfocado: para desenfocar la imagen

.taxi{
-webkit-filter: blur(5px);
filter: blur(5px);
}

Filtro grises: para modificar la imagen a escala de grises

.taxi{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Filtro sepia: al igual que el filtro anterior modifica la imagen pero esta vez en color sepia

.taxi{
-webkit-filter: sepia(100%);
filter: sepia(100%);
}

Filtro inverso: para invertir los colores y saturación de la imagen

.taxi{
-webkit-filter: invert(100%);
filter: invert(100%);
}

Por último, podemos aplicar distintos filtros a la vez de la siguiente manera:

.taxi{
-webkit-filter: blur(5px) saturate(300%);
filter: blur(5px) saturate(300%);
}