Con los filtros CSS podrás aplicar varios efectos visuales a elementos, normalmente imágenes, aunque también los podrás usar para fondos, bordes…

 

Propiedades generales de los filtros CSS

La propiedad se define de la siguiente forma:

img {
  filter: grayscale(100%);
}

Podrás utilizar las siguientes funciones:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – para aplicar sobre SVG
  • custom()

 

Puedes ver en este estás imágenes de la guitarra ir modificando los diferentes filtros:

See the Pen
Play with Individual CSS filters
by Chris Coyier (@chriscoyier)
on CodePen.

 

¿Cómo se eliminan los filtros existentes?

Con el siguiente código:


img {
filter: none;
}

 

¿Cómo se añaden varios filtros a la vez?

Simplemente tienes que indicar los diferentes valores que quieres. Ahí te va un ejemplo:

.img {
  filter: blur(3px) grayscale(20%);
}

 

Definir la función de la propiedad del filtro

La mayoría tienen valores entre el 0 y el 100%, y si quieres también los puedes definir en valor decimal entre 0 y 1, por ejemplo: 0.3. Pero hay algunos valores que se indican en px como blur u otros formatos distintos.

 

Generadores de filtros CSS

Si no quieres complicarte escribiendo estilos, tienes una opción rápida para generar estos filtros CSS y es mediante generadores. A continuación te indico varias páginas desde donde podrás generar el código que necesitas en un par de clics.

Filter CSS Generator

Escoge sobre la imagen de muestra las diferentes opciones de filtro que deseas aplicar. Según las opciones escogidas se genera un código que solo tendrás que copiar y pegar donde estén el resto de estilos CSS.

filter css generator

 

 

Just Code

De funcionamiento similar al anterior, podrás conseguir un código rápido y eficaz.

justcode

 

 

 

Angry Tools

Lo bueno de esta herramienta online es que no sólo te servirá para configurar filtros CSS sino otras muchas otras propiedades CSS como la sombra, degradado, animaciones…

angrytools

 

 

CSS Filters

Si estás buscando una herramienta online que te genere los estilos de filtros CSS a partir de la imagen que tu quieras, aquí la tienes. Podrás subir una imagen e irle aplicando los distintos filtros.

cssfilters.co

 

 

Otras herramientas de filtros CSS

CSS Filters Editor

Es una extensión de Chrome que podrás instalar en ese navegador. Podrás modificar los valores de los filtros de una imagen.

css filter editor

 

Y hasta aquí todo lo relativo a filtros CSS, si quieres comentar algo acerca de este tema solo tienes que dejar tu comentario más abajo.