Con el modulo de filtros y la propiedad filter de css, que deriva, del standar del formato de SVG, disponemos de una carácteristica estupenda, para crear efectos a imágenes y a otros elementes html, que antes solo eran posibles lograr, utilizando programas de edición gráfica.

Podemos aplicar filtros como blur (desenfoque) ó grayscale, (escala de grises), a imágenes u otros elementos, declarandole en el css, a ese elemento la propiedad filter, con la función de filtro que deseemos, de entre las existentes, que a continuación veremos.

Por ejemplo:

Aplicaría un filtro de desenfoque gausiano a las imágenes del documento.

Las funciones de filtros grayscale(), saturate(), brightness(), contrast(), invert(), opacity() y sepia(), admiten valores numericos, por ejemplo: 0, 0.5, 1, 1.5, ...., ó en porcentaje, por ejemplo: 0%, 50%, 100%, 150%, ...., donde 0 = 0%, 0.5 = 50%, 1 = 100%, 1.5 = 150%, etc.

A la función del filtro blur, le asignaremos valores numericos en pixeles, el valor por defecto es 0px, y cuanto más pixeles le des, más desenfocarás el elemento afectado.

La función del filtro drop-shadow, generá una sombra idéntica del objeto, tiene la misma síntaxis que la propiedad text-shadow, se designa la posición de la sombra en el ejeX y en el ejeY, y opcionalmente un numero de pixeles de desenfoque de la sombra y su color. Se pueden encadenar distintas sombras, separadas por un espacio en blanco.

Con la función del filtro hue-rotate, podemos variar, el hue (tono), del color del elemento. Como en la escala de colores hsl, el hue ó tono, es el valor del angulo, del circulo donde estan representados todos los colores, por tanto su valor es un angulo (deg). Puede ir desde 0deg, (valor por defecto) hasta 359deg, que completarían los 360º, que tienen por defecto los circulos.