Para conseguir el efecto de invertir colores a un elemento o imagen usamos la propiedad “filter” con el valor “invert” aplicando el % de fuerza que queramos. Funciona tanto con elementos con estilos de color sólidos, imágenes y svg.

Estos efectos de filtro al principio eran solo posibles para SVG. Recordar que aparte existen más filtros css3 como son: desenfoque, escala de grises, brillo, contraste y tono.

Creamos la siguiente clase con el valor “invert” al 100%:

Y en este caso para verlo en acción sobre una foto:

Foto Normal:

Foto con el filtro “invert”:

(*) A fecha de creación de este post no era soportado aún por IE, pincha aquí para ver el soporte en la actualidad de la propiedad “filter” de css3