Propiedad CSS : filter

No se aplica ningún filtro. (valor por defecto)

Filtro que aplica un desenfoque Gaussiano al objeto.

El desenfoque debe ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida excepto porcentajes '%'.

Se tiene que especificar un valor que determinarña la dfesviación estándar, dicho valor puede ser especificado utilizando cualquier tipo de unidad relativa válida (excepto porcentajes '%').
Consulta la Referencia CSS : Unidades para más información.

Por ejemplo podéis ver los pasos de la animación de la derecha :

filter:blur(0px);          /* 0 píxeles de desenfoque */
filter:blur(5px);          /* 5 píxeles de desenfoque */

Filtro que modifica el brillo en el objeto.

Hay que especificar un valor decimal positivo para aplicar un multiplicador linear al filtro, por defecto es 1, si es menor el resultado será más oscuro, si es mayor el resultado será mas brillante.

Por ejemplo :

filter:brightness(0.1);                                                 /* 10% brillo  */
filter:brightness(2);                                                   /* 200% brillo */

Filtro que modifica el contraste en el objeto.

Hay que especificar un porcentaje para el contraste. Por defecto es 100%, un 0% es completamente gris, y un valor por encima del 100% nos da más contraste.

Por ejemplo :

filter:contrast(0%);                                                    /*   0% contraste (gris) */
filter:contrast(200%);                                                  /* 200% de contraste     */

Filtro que a partir de la mascara alfa del objeto crea una o mas sombras.

Esta función tiene 2 parametros obligatorios, las coordenadas X e Y donde se ubicará la sombra partiendo desde el centro. se puede especificar con cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.

Ademas según la mdn tiene 3 parámetros opcionales, pero hasta la fecha solo dos de ellos funcionan en Webkit.

• Rádio de desenfoque. Se utiliza igual que la función blur pero solo se aplica a la sombra.
• Rádio de expansión. se puede especificar con cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.
  no funciona en Webkit e invalida el string de todo el filter, por lo que no se aplicará ningún filtro si especificas mas de 3 valores con un tipo de unidad de tamaño relativo válido...
• Color de la sombra. Para mas información sobre los colores en CSS visita este enlace Referencia CSS : Colores.

Por ejemplo :

filter:drop-shadow(3px 3px);                                            /* Sombra abajo a la derecha */
filter:drop-shadow(-4px 2px 3px red);                                   /* Sombra roja difuminada abajo a la izquierda */
filter:drop-shadow(1px 1px 1px 2px red);                                /* NO FUNCIONA EN WEBKIT */

Para especificar más de una sombra, separa los parámetros con una coma ',', por ejemplo :

filter:drop-shadow( 3px 3px black,                                      /* Sombra inferior derecha negra */
                    -3px 3px rgba(100, 100, 100, 0.6) );                /* sombra inferior izuiqerda gris translucido */

Filtro que convierte el objeto a una escala de grises.

Se tiene que especificar un porcentaje para el filtro. Un 0% deja la imagen intacta, un 100% convierte la imagen a una escala de gris.

Por ejemplo :

filter:grayscale(0%);                                                   /* Escala de grises al 0% */
filter:grayscale(100%);                                                 /* Escala de grises al 100% */

Filtro que aplica la rotación HUE (tono/matíz) de colores al objeto.

Requiere un valor en grados, 0deg no modificará el objeto, 180deg invertira el HUE del objeto, 360deg es igual a 0deg y a partir de aquí se puede rotar lo que quieras que cada vuelta completa (360deg) será como empezar desde 0deg.

filter:hue-rotate(0deg);                                                /* color normal */
filter:hue-rotate(180deg);                                              /* color opuesto */

Filtro que invierte los valores RGB del objeto.

Se requiere especificar un porcentaje. Un 0% deja el objeto sin cambios, un 100% invierte los valores RGB del objeto (por lo que el blanco (255,255,255) será negro(0,0,0).

filter:invert(0%);                                                      /* normal */
filter:invert(100%);                                                    /* RGB invertido */

Filtro que aplica una transparencia al objeto (alpha blend)

Hay que especificar un valor decimal positivo para aplicar la transparencia en el objeto.

Por ejemplo :

filter:opacity(1.0);                                                    /* opaco */
filter:opacity(0.0);                                                    /* transparente */

Filtro que aplica saturación al objeto.

Se tiene que especificar un porcentaje positivo, un 0% dejara el objeto sin saturación, un 100% dejará el objeto intacto, y un 101% o superior aplicará una saturación en el objeto.

Por ejemplo :

filter:saturate(150%);                                                  /* Saturación al 150% */

Filtro que aplica un color sepia al objeto.

Se tiene que especificar un porcentaje positivo, un 0% dejara el objeto intacto, y un 100% o superior aplicará un color sepia al objeto.

filter:sepia(0%);                                                       /* normal */
filter:sepia(100%);                                                     /* 100% sepia */