10 Filtros CSS para añadir a tus imágenes

Cuando un desarrollador o diseñador web lleva a cabo la maquetación de un proyecto, necesita aplicar determinados efectos en algunas imágenes.

Vamos a mostrar unos filtros CSS para aplicar los efectos más populares usando únicamente código CSS. Por lo que no va a ser necesario utilizar una herramienta de edición de fotografía como Adobe Photoshop, Gimp…

Además, vamos a reducir el espacio en nuestro servidor web, ya que vamos a utilizar una sóla imagen, y no 10 imágenes por cada efecto que queremos aplicar. Por lo que en el aspecto de rendimiento va a ser notable. Antes de subir imágenes, deberás todas tus imágenes para que tarde menos en cargar tu página web. Dejo una herramienta online que comprime tus imágenes de forma online.

Antes de empezar, hay que tener en cuenta que algunos de estos filtros no son compatibles con todos los navegadores web, aunque se prevé que en futuras versiones de los otros navegadores más usados la compatibilidad con los filtros mejorará. Debajo os dejo una tabla de compatibilidades por cada navegador web.

Versiones Compatibles
filter	53.0	35.0	9.1	40.0	13.0
-webkit-filter	18.0		6.0	15.0

Esta es la imagen original que vamos a usar para los ejemplos de filtros CSS:

Escala de grises

Da un efecto de escala de grises. El valor que hay que aplicar,define la proporción de la conversión; mientras más grande sea el valor, más gris va a ser la imagen (100% valor máximo).

filter: grayscale(100%);
-webkit-filter: grayscale(100%);

Desenfoque

Da un desenfoque gaussiano (es un efecto de suavizado para mapas de bits generado por software de edición gráfica. El efecto es generado por medio de algoritmos matemáticos). El valor define cuántos pixeles en la pantalla se mezclan entre sí. Cuando más grande el valor más borroso va a ser.

filter:blur(5px);
-webkit-filter:blur(5px);

Brillo

Se aplica un multiplicador lineal a la imagen; dando ese efecto de brillo. Se pueden usar valores porcentuales o numéricos.

filter:brightness(200%);
-webkit-filter:brightness(200%);

Contraste

Aplica el este filtro de contraste a la imagen, hace que destaque un elemento visual en comparación con otro en la misma imagen. También se puede definir como la diferencia entre el tono más negro y el tono más blanco de la imagen.

filter:contrast(200%);
-webkit-filter:contrast(200%);

Sombreado

Aplica un efecto de sombra a la imagen y acepta el parámetro de fondos definido por CSS3. Este filtro es similar a la propiedad box-shadow; la diferencia es que con filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento. Aplica un sombreado como si estuviera colgada esta foto en una pared.

filter:drop-shadow(8px 8px 10px gray);
-webkit-filter:drop-shadow(8px 8px 10px gray);

Tono rotativo

Se aplica una rotación de matriz en la imagen. Cambia el matiz relativo de un elemento, para su uso por la propiedad de filtro. Acepta una medida de ángulo de grados que representa una rueda de matices. El valor define el número de grados alrededor del círculo de color. (360deg. valor máximo)

filter: hue-rotate (90deg);
-webkit-filter: hue-rotate (90deg);

Inverso

Invierte los colores de una imagen. Un valor de 100% sería totalmente invertido.

filter:invert(100%);
-webkit-filter:invert(100%);

Transparencia

Aplica transparencia a una imagen. Este filtro es similar a la propiedad opacity; la diferencia, como lo mencioné anteriormente, es que con los filtros, algunos navegadores ofrecen la aceleración de hardware para mejorar el rendimiento.

filter:opacity(30%);
-webkit-filter:opacity(30%);

Saturado

Aplica saturación a una imagen. 

filter:saturate(8);
-webkit-filter:saturate(8);

Sepia

Aplica el efecto sepia a una imagen. 

filter:sepia(100%);
-webkit-filter:sepia(100%);

Combinación de filtros

Si queremos aplicar más de un filtro de manera simultánea, podemos hacerlo separando los efectos que queramos usar con un espacio

filter:contrast(200%) brightness(150%);
-webkit-filter:contrast(200%) brightness(150%);

Como puedes ver, nos proporciona una gran variedad de filtros CSS muy interesantes; con ellos podemos lograr varios efectos para nuestras imágenes y así dar un mejor aspecto a nuestro sitio web.

Si quieres ver más utilidades, te recomiendo que eches un vistazo al apartado HTML5 y CSS3