Filtro invert() en CSS: Cómo invertir colores en imágenes y UI

Ver demo Descargar Fuente

Como ya hemos visto en múltiples ocasiones, CSS ha evolucionado hasta un punto en el que ya no dependemos de herramientas externas como Photoshop o GIMP para aplicar efectos visuales interesantes, incluyendo todo tipo de filtros en CSS. En mi caso, una de las cosas que más me llamó la atención cuando empecé a experimentar con filtros CSS fue lo sencillo que resulta invertir colores directamente desde el navegador, con una sola línea de código.

En este artículo te explico qué es el filtro invert() en CSS, cómo funciona internamente, cómo usarlo correctamente y varios ejemplos reales, desde los más básicos hasta uno avanzado con múltiples elementos interactivos.

El filtro invert() es un claro ejemplo de la potencia de CSS moderno: simple, potente y con usos prácticos tanto en imágenes como en interfaces completas.

¿Qué es el filtro invert en CSS y para qué sirve?

El filtro invert() es una función de CSS que pertenece al módulo CSS Filter Effects y se utiliza para invertir los colores de un elemento HTML. A diferencia de editar la imagen en un programa externo, esta inversión ocurre en tiempo real en el navegador, sin tocar el archivo original.

Cuando aplicamos filter: invert() a una imagen o cualquier elemento HTML:

Los colores claros pasan a oscuros
Los oscuros pasan a claros
El proceso se realiza en tiempo real, sin modificar el recurso gráfico original

Esto lo convierte en una solución ideal para:

Crear efectos visuales atractivos sin necesidad de imágenes alternativas
Resaltar elementos al hacer hover
Simular modos oscuros o temas alternativos de forma rápida
Alterar estados visuales sin duplicar recursos gráficos

Cómo funciona invert(): la lógica del canal RGB

El filtro invert() invierte cada canal de color RGB de forma independiente, restando el valor actual a 255.

El filtro invert, perteneciente al módulo de filtros de CSS, permite invertir los colores de una imagen con apenas una regla. Su lógica es tan directa como elegante: si tenemos un color negro, es decir:

rgb(0, 0, 0);

El resultado tras aplicar el filtro será blanco puro:

rgb(255, 255, 255);

Y ocurre exactamente lo mismo con otros tonos intermedios. Por ejemplo, si tenemos un gris suave:

rgb(232, 230, 232);

El filtro calcula el complemento de cada canal y obtenemos un gris oscuro:

rgb(23, 25, 23);

En pocas palabras, el filtro resta a 255 el valor de cada canal por separado. Por ejemplo:

255 - 232 = 23

La lógica de restar a 255

Cada color en el modelo RGB está compuesto por tres canales con valores entre 0 y 255:

Negro → rgb(0, 0, 0)
Blanco → rgb(255, 255, 255)

Tomemos el píxel negro rgb(0, 0, 0). Al aplicar filter: invert(1), el navegador calcula el complemento de cada canal:

255 - 0 = 255
255 - 0 = 255
255 - 0 = 255

Resultado: rgb(255, 255, 255) — blanco puro. Y a la inversa, si partimos de blanco, obtenemos negro.

Con colores intermedios ocurre exactamente lo mismo. Partiendo del gris suave rgb(232, 230, 232), el navegador calcula:

255 - 232 = 23
255 - 230 = 25
255 - 232 = 23

Resultado:

rgb(23, 25, 23)

Es decir, el filtro resta cada canal de color a 255, canal por canal.

Qué ocurre con valores intermedios (25%, 50%, 75%)

El filtro invert() no tiene por qué aplicarse al 100%. Podemos usar valores intermedios, y aquí entra en juego la fórmula real que utiliza el navegador internamente:

amount * (255 - value) + (1 - amount) * value

Donde:

amount es el valor de inversión (de 0 a 1)
value es el valor original del canal de color

Esta fórmula explica por qué:

invert(0%) → no hay cambios visibles
invert(50%) → la imagen tiende a tonos grises neutros (el punto medio entre original e invertido)
invert(100%) → inversión total de colores

En la práctica, usar valores intermedios permite efectos mucho más sutiles y controlados, especialmente cuando se combinan con transition para crear animaciones fluidas.

¿Cómo se usa el filtro invert en CSS?

La sintaxis es muy sencilla. El filtro invert se aplica mediante la propiedad filter de CSS sobre cualquier elemento HTML — no solo imágenes:

img {
 filter: invert(valor);
}

Valores permitidos: porcentaje vs número decimal

Puedes indicar el valor de inversión de dos formas equivalentes:

filter: invert(0.6);
filter: invert(60%);

Ambas líneas producen exactamente el mismo resultado. CSS acepta tanto el formato decimal (de 0 a 1) como el porcentual (de 0% a 100%) por coherencia con otros filtros del módulo.

Valores habituales:

invert(0) o invert(0%) → sin efecto, imagen original
invert(0.5) o invert(50%) → efecto parcial, tonos grises
invert(1) o invert(100%) → inversión total de colores

Diferencia entre invert(1) e invert(100%)

No existe ninguna diferencia funcional entre ambas notaciones. CSS permite los dos formatos por comodidad y consistencia con otros filtros del módulo como contrast(), brightness() o opacity(). Usa el que te resulte más legible en tu código.

Por supuesto, existen muchos otros filtros disponibles en CSS: grayscale(), blur(), sepia(), saturate(), opacity(), brightness(), contrast(), hue-rotate() y drop-shadow(); pero en este artículo el protagonista es invert(). Puedes combinarlos en una misma declaración filter separados por espacios.

Invirtiendo los colores de una imagen con el filtro invert

El caso más básico consiste en aplicar la inversión total a todos los colores de una imagen:

img {
 filter: invert(100%);
}

imagen con filtro invert al 100% en CSS

Aunque podemos usar un porcentaje menor para un efecto más sutil; por ejemplo, un 66%:

imagen con filtro invert al 66% en CSS

O un 50%, donde la imagen tiende a tonos grises intermedios (punto de equilibrio entre el original y la versión invertida):

imagen con filtro invert al 50% en CSS

O un 25% para una inversión apenas perceptible:

imagen con filtro invert al 25% en CSS

En general, puedes usar cualquier valor comprendido entre 0% y 100% según el efecto visual que desees conseguir.

Otro uso muy práctico es activar el filtro invert al pasar el cursor por encima de la imagen, lo cual logramos combinándolo con el selector :hover:

img:hover {
 filter: invert(100%);
}

imagen con filtro invert activado en hover CSS

Y podemos potenciarlo añadiendo una transición CSS para suavizar el cambio de estado, logrando una animación fluida en lugar de un salto brusco:

imagen con filtro invert y transition en hover CSS

En este ejemplo hemos empleado filter: invert(100%), pero ya es cuestión tuya decidir en qué proporción aplicarlo según las necesidades de tu diseño.

Uso combinado con transiciones CSS

Para que el efecto no sea brusco, es fundamental añadir una transition. Esto le indica al navegador que interpole suavemente entre el estado inicial y el estado final del filtro:

img {
 filter: invert(0%);
 transition: filter 0.5s ease-in-out;
}

img:hover {
 filter: invert(100%);
}

Uno de los usos más atractivos del filtro invert() es precisamente activarlo al pasar el cursor sobre un elemento. La combinación de :hover y transition crea una experiencia visual inmediata y elegante que destaca la imagen sin necesidad de duplicar recursos.

Suavizando el efecto con transition

img {
 filter: invert(0%);
 transition: filter 0.5s ease;
}
img:hover {
 filter: invert(100%);
}

Este pequeño detalle marca una gran diferencia en la experiencia visual del usuario. Sin la transition, el cambio se percibe como un parpadeo; con ella, la inversión fluye de forma natural.

Ejemplo avanzado: invertir colores en múltiples elementos con foco visual

Este tercer ejemplo es bastante más interesante que los anteriores. La idea es crear un efecto donde el elemento que tiene el cursor encima destaca con sus colores originales y un ligero escalado, mientras que el resto de los elementos del conjunto se invierten y reducen ligeramente, generando una clara jerarquía visual sin necesidad de imágenes adicionales.

Al colocar el cursor sobre un ítem (hover), este se escala a un tamaño ligeramente mayor y conserva sus colores originales; mientras que los ítems no seleccionados reciben el filtro invert(100%) y se reducen un poco mediante scale(0.95). La combinación de ambos efectos —seleccionado vs. no seleccionado— crea la sensación de que el ítem activo se eleva por encima de los demás.

Este es el resultado final:

Realidad Aumentada con Vuforia

logo vuforia

Múltiples bordes en un contenedor

imagen promocional entrada de bordes múltiples en css

Múltiples fondos animados con CSS

imagen promocional entrada de fondos animados con css

El elemento Progress Bar HTML5

imagen promocional entrada de Progress Bar HTML5

Primeros pasos con los SVG de HTML5

imagen promocional entrada de fondos animados SVG HTML

Videos responsive para YouTube: CSS y JavaScript

imagen promocional entrada de YouTube responsive

¡Empecemos a construirlo!

El HTML

La estructura es completamente estándar: un elemento <main> como contenedor principal, y dentro de él una serie de <article> con la clase item que actuarán como las tarjetas interactivas:

    <main class="content">
        <article class="item">
            <a href="">
                <h6>Título</h6>
                <p>Texto.</p>
            </a>
        </article>
        <article class="item">
            <!-- Más artículos -->
        </article>
    </main>

El CSS

Aquí está el corazón del efecto. El CSS define el modelo visual de los ítems, las reglas de hover para el elemento activo y la clase blur que JavaScript asignará dinámicamente a los elementos no seleccionados.

Primero, el contenedor principal: no más de 500px de ancho, centrado y con un fondo gris que sirve como lienzo:

.content{
  max-width:500px;
  width:80%;
  height:auto;
  padding:20px;
  background:#CCC;
  margin: 0 auto;
}

Como estamos empleando elementos flotantes (float), necesitamos aplicar el truco del clearfix para que el contenedor los englobe correctamente. Lo hacemos usando los pseudo-elementos ::before y ::after:

.content:before,
.content:after {
  content: "";
  display: block;
  clear: both;
}

Los ítems son cajas rectangulares sencillas con separación entre ellas. La clave está en la propiedad transition, que suaviza automáticamente todos los cambios de estado: la sombra, la escala y, por supuesto, el filtro invert:

article.item{
  padding:5px;
  background:#FFF;
  width:150px;
  height:220px;
  margin:0 5px 5px 0;
  float: left;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
  transition:box-shadow 2s, transform 500ms, filter 500ms ease-in-out;
}

Al hacer hover sobre un ítem, lo escalamos ligeramente y aumentamos su sombra para reforzar la sensación de que se eleva del plano:

article.item:hover{
  transform: scale(1.05);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
}

Y aquí la clase que JavaScript asignará a los ítems no seleccionados: inversión total de colores y una reducción sutil mediante scale(0.95):

article.blur{
 filter: invert(100%);
 transform: scale(0.95);
}

Los demás estilos son de fácil comprensión, así que pasamos directamente al JavaScript.

El JavaScript

Aquí es donde entra JavaScript para hacer lo que solo con CSS sería muy complicado: aplicar una clase a los elementos que no tienen el cursor encima. CSS no dispone de un selector nativo para "todos los elementos hermanos excepto el que está en :hover", por lo que lo resolvemos con un pequeño script:

// Seleccionamos todos los elementos con la clase 'item'
const items = document.querySelectorAll('.item');
items.forEach(item => {
    // Evento cuando el mouse entra (mouseenter)
    item.addEventListener('mouseenter', () => {
        items.forEach(el => {
            if (el !== item) {
                el.classList.add('blur');
            }
        });
    });
    // Evento cuando el mouse sale (mouseleave)
    item.addEventListener('mouseleave', () => {
        items.forEach(el => {
            el.classList.remove('blur');
        });
    });
});

El script selecciona todos los elementos con la clase item y escucha dos eventos por cada uno: mouseenter (cuando el cursor entra) y mouseleave (cuando el cursor sale). Al entrar, añade la clase blur —que contiene el filter: invert(100%)— a todos los ítems excepto al activo; al salir, la elimina de todos para restaurar el estado original. Simple, eficaz y sin dependencias.

Ver demo Descargar Fuente

Filtro invert con SVG: una alternativa avanzada

CSS no es la única vía para invertir colores en el navegador. También podemos lograrlo mediante filtros SVG, concretamente usando el elemento <feComponentTransfer> con tablas de valores que remapean cada canal de color:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="1 0"/>
      <feFuncG type="table" tableValues="1 0"/>
      <feFuncB type="table" tableValues="1 0"/>
    </feComponentTransfer>
  </filter>
</svg>

Y se aplica referenciando el id del filtro desde CSS:

.filter {
 filter: url("#invert");
}

¿Cuándo usar SVG en lugar de CSS?

Cuando necesitas compatibilidad con flujos gráficos complejos o filtros encadenados
Cuando ya estás trabajando con SVG y quieres reutilizar los filtros como recursos centralizados
Cuando necesitas un control más granular sobre canales de color individuales

Para la mayoría de los casos del día a día, filter: invert() es más que suficiente. Pero conocer la alternativa SVG te da un recurso extra para situaciones más complejas.

filter vs backdrop-filter: cuándo usar cada uno

Es importante no confundir estas dos propiedades, ya que actúan sobre áreas diferentes del documento:

filter → afecta al elemento en sí y a todo su contenido
backdrop-filter → afecta únicamente al fondo visual que hay detrás del elemento

Ejemplo con backdrop-filter:

div.transbox {
 background-color: rgba(255, 255, 255, 0.4);
 backdrop-filter: invert(100%);
}

Esto es especialmente útil en diseños modernos tipo glassmorphism, donde un panel semitransparente invierte el contenido que queda detrás de él sin afectar a su propio contenido.

Casos prácticos y usos reales del filtro invert en CSS

Algunos escenarios donde el filtro invert() resulta especialmente útil en proyectos reales:

Resaltar imágenes en galerías fotográficas o portfolios
Crear efectos hover llamativos sin necesidad de imágenes alternativas o sprites
Simular temas oscuros de forma rápida sin reescribir estilos
Generar contrastes visuales sin modificar los recursos originales
Interfaces interactivas con foco visual claro
Invertir iconos o logotipos oscuros para adaptarlos a fondos claros (o viceversa) usando filter: brightness(0) invert(1), sin tocar el archivo original

Errores comunes y buenas prácticas

Evita estos errores frecuentes al trabajar con filter: invert():

Aplicar invert(100%) sobre textos largos, ya que puede reducir considerablemente la legibilidad según el fondo
Combinar demasiados filtros simultáneamente sin medir el impacto en rendimiento (cada filtro implica un cálculo por píxel en tiempo real)
Olvidar añadir la propiedad transition, lo que hace que el cambio de estado sea brusco e incómodo visualmente

Buenas prácticas:

Usa valores intermedios cuando quieras efectos sutiles en lugar de la inversión completa
Combínalo siempre con transition para una experiencia de usuario más fluida y profesional
Prueba el filtro con diferentes tipos de imágenes antes de pasar a producción; los resultados varían mucho según la paleta de colores original
Para convertir un icono negro a blanco, usa la combinación filter: brightness(0) invert(1) en lugar de modificar el archivo SVG o PNG original

Preguntas frecuentes sobre invert() en CSS

¿invert() funciona solo con imágenes?
- No, funciona con cualquier elemento HTML: <div>, <section>, <span>, botones, formularios… cualquier nodo renderizable en el DOM.
¿Puedo animar invert()?
- Sí, usando la propiedad transition para interpolaciones suaves, o bien @keyframes junto con animation para ciclos más complejos.
¿Es compatible con todos los navegadores modernos?
- Sí, con soporte completo desde hace años en Chrome, Firefox, Safari y Edge. Puedes consultar la cobertura exacta en MDN Web Docs.
¿Cómo convierto un icono negro a blanco con CSS?
- Usa la combinación filter: brightness(0) invert(1). Primero brightness(0) convierte todos los píxeles a negro puro, y luego invert(1) los convierte a blanco.
¿El filtro invert() afecta al canal alfa (transparencia)?
- No. El canal alfa no se invierte; solo se aplica sobre los canales RGB, por lo que las transparencias de la imagen original se mantienen intactas.

Conclusión

El filtro invert() en CSS es una herramienta sencilla pero extremadamente potente. En mi experiencia, es uno de esos efectos que, bien utilizado, puede transformar completamente la percepción visual de una interfaz sin apenas esfuerzo. Lo que hace unos años requería editar la imagen en Photoshop, hoy se resuelve con filter: invert(1) y, si quieres que sea elegante, con una transition al lado.

Desde la inversión básica de una imagen hasta efectos interactivos con múltiples elementos, pasando por su combinación con :hover, transition y JavaScript, las posibilidades son mucho más amplias de lo que aparentan a primera vista.