CSS3: invertir colores

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%:

.invertir-color {
     -webkit-filter: invert(100%);
    filter: invert(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