La propiedad filter nos permite agregar filtros ya predeterminados en CSS. Nos sirven para darle mejores efectos a nuestras paginas web con el objeto de poder hacerlas mas estéticas.

ATENTI

Si bien muchos de ellos funcionan a la perfección, esta es una tecnologia experimental por lo que puede no funcionar con algunos navegadores.

Estos son ejemplos de algunos de los filtros que podemos utilizar. Para ver cada elemento utilizaremos la siguiente foto

Blur

El valor blur aplica un desenfoque de tipo gaussiano al elemento que seleccionamos. Esta es su estructura

img{
	filter:blur(5px)
}

Blur necesita que entre parentesis le pasemos que tan desenfocado se verá. A mas pixeles, mas desenfocado. Este es el resultado de la imagen con un blur de 5px;

Y este es el resultado con un blur de 20px

Brightness

Es posible alterar el brillo de un elemento con la propiedad brightness. Esta acepta como valores numeros del 0.1 al 1 o mas o porcentajes. Es mas recomendado utilizar porcentajes porque se entiende mejor. En cualquier caso 1 o 100% es el valor por defecto

Esta es la estructura

img{
filter:brightness(10%)
}

Este es el resultado de la imagen con brightness al 10%

Y este es el resultado con brightness al 200%