Como ya hemos visto en múltiples como CSS ha evolucionado hasta un punto en el que ya no dependemos de herramientas externas como Photoshop o Gimp para aplicar efectos visuales interesantes incluso 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.
El filtro invert() es un claro ejemplo de ello: 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.
Cuando aplicamos filter: invert() a una imagen o elemento HTML:
- Los colores claros pasan a oscuros
- Los oscuros pasan a claros
- El proceso se realiza en tiempo real, sin modificar la imagen original
Esto lo convierte en una solución ideal para:
- Crear efectos visuales atractivos
- Resaltar elementos al hacer hover
- Simular modos oscuros
- Alterar estados visuales sin duplicar recursos gráficos
Cómo funciona invert(): explicación sencilla del RGB
El filtro invierte cada canal de color RGB.
El filtro que vamos a ver hoy se llama invert perteneciente a la familia de CSS, permite invertir los colores de una imagen, así de simple, invierte el canal RGB (o cualquier otro empleado) con apenas una regla CSS; si tenemos una imagen en donde uno de sus colores es negro; es decir:
rgb(0, 0, 0);Entonces lo que vamos a obtener será un color blanco:
rgb(255, 255, 255);Por supuesto, lo mismo ocurre con otras escalas de color; por ejemplo, si tenemos un gris suave:
rgb(232, 230, 232);Entonces lo que conseguimos será un color oscuro:
rgb(23, 25, 23);En pocas palabras, este filtro lo que hace es restar a 255 el valor de un canal por vez; por ejemplo:
255 - 232 = 23En resumen:
La lógica de restar a 255
Cada color RGB está compuesto por valores entre 0 y 255:
- Negro → rgb(0, 0, 0)
- Blanco → rgb(255, 255, 255)
Si tenemos un píxel negro:
rgb(0, 0, 0)
Al aplicar el filtro invert, obtenemos:
rgb(255, 255, 255)
Y al revés, si partimos de blanco, el resultado será negro.
Con colores intermedios ocurre exactamente lo mismo. Por ejemplo, un gris suave:
rgb(232, 230, 232)
Tras aplicar invert(), el navegador calcula:
255 - 232 = 23
255 - 230 = 25
255 - 232 = 23Resultado:
rgb(23, 25, 23)Es decir, el filtro resta cada canal a 255, uno por uno.
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:
amount * (255 - value) + (1 - amount) * valueDonde:
- amount es el valor de inversión (de 0 a 1)
- value es el valor original del canal
Esto explica por qué:
- 0% → no hay cambios
- 50% → la imagen tiende a tonos grises
- 100% → inversión total
En la práctica, esto permite efectos mucho más sutiles y controlados.
¿Cómo funciona el filtro invert en CSS?
Recordando su funcionamiento; el filtro consiste en emplear la propiedad invert sobre nuestra imagen:
img {
filter: invert(valor);
}Valores permitidos: porcentaje vs número
Puedes indicar el valor de dos formas:
filter: invert(0.6);
filter: invert(60%);Ambas líneas hacen exactamente lo mismo.
Valores habituales:
- invert(0) o invert(0%) → sin efecto
- invert(0.5) o invert(50%) → efecto parcial
- invert(1) o invert(100%) → inversión total
Aquí vemos que empleamos el valor de 100%:
img {
filter: invert(100%);
}Podemos indicar en qué proporción queremos que se invierten los colores, si dando la vuelta completa, como especificamos anteriormente o en un porcentaje menor.
Por supuesto, existen muchos otros filtro: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, y invert; pero; en este artículo el filtro de interés es el de inversión.
En esta sección vamos a emplear el filtro en algunos ejemplos para hacernos mejor a la idea como funciona este simple, pero atractivo filtro.
Diferencia entre invert(1) e invert(100%)
No hay ninguna diferencia funcional. CSS permite ambos formatos por comodidad y consistencia con otros filtros como contrast() o brightness().
Invirtiendo los colores de nuestras imágenes con el filtro invert
El más simple de todos, consiste en aplicarle la inversión total de todos los colores de nuestra imagen:
img {
filter: invert(100%);
}
Aunque podemos emplear menos: por ejemplo un 66%:
O un 50%:
O un 25%:
En general, cualquier valor que nosotros consideremos que esté comprendido entre 0 a 100%.
Otro posible uso podría ser activar el filtro de inversión o invert al pasar el cursor por encima de la imagen; y esto lo logramos utilizando el selector :hover.
img:hover {
filter: invert(100%);
}
Y podemos potenciarlo con las transiciones en CSS que también ya lo hemos tocado antes:
En este ejemplo hemos empleado un filtro invert al 100%, pero ya es cuestión tuya en qué proporción desee emplearlo.
Uso combinado con transiciones
Este tercer ejemplo es un poco más interesante; les mostraremos como crear un simple efecto para invertir los colores sobre cajas de texto (elementos div con algún contenido; textos e imágenes para este ejemplo), o mejor dicho, sus imágenes; estas cajas las llamaremos 'ítems'; básicamente los ítems serán escalados un poquito y se les aplicará el filtro de invert (a las imágenes) para invertir los colores ya visto en los ejemplos anteriores; además usaremos transiciones para 'suavizar' el pasar de un estado a otro y un código jQuery para aplicar la respectiva clase de desenfoque (blur) a ciertos ítems.
La idea es que al colocar el cursor sobre una item (hover), entonces este ítem se escalará a un tamaño un poco mayor; y luego aplicamos el filtro invert mediante una transición a los items no seleccionados; por lo tanto da la sensación de que el ítem está saliendo de su cuadrícula y se eleva encima de los demás con un característico efecto logrado en el que la imagen pase de tener los colores invertidos a tenerlos completamente normales.
Este es el resultado final:
Realidad Aumentada con Vuforia
Múltiples bordes en un contenedor
Múltiples fondos animados con CSS
El elemento Progress Bar HTML5
Primeros pasos con los SVG de HTML5
Videos responsive para YouTube: CSS y JavaScript
¡Empecemos!
Un HTML tradicional; tenemos un tag main o principal; dentro de este tag, tendremos nuestros ítems o cajas de texto con algún contenido interesante.
<main class="content">
<article class="item">
<a href="">
<h6>Título</h6>
<p>Texto.</p>
</a>
</article>
<article class="item">
<!-- Mas articulos -->
</article>
</main>En esta sección explicaremos lo que sería el corazón de nuestro experimento; el CSS en donde definimos el modelos básico y reglas para que luzca como queramos al posicionarnos (hover) encima de los elementos y de aplicar el estilo correspondiente a los elementos no seleccionados que lo enlazamos un poco más adelante con JavaScript.
Con esto, crearemos un contenedor de nos mas de 500px de ancho y centrado; además agregaremos más estilos aunque puedes personalizarlo como quieras; este contenedor tendrá una colección de items a los cuales se les aplicará el filtro invert de CSS:
.content{
max-width:500px;
width:80%;
height:auto;
padding:20px;
background:#CCC;
margin: 0 auto;
}Cómo estamos empleando contenido flotante, para que sea tomado por su contenedor debemos aplicar un pequeño truco empleando los selectores before y after:
.content:before,
.content:after {
content: "";
display: block;
clear: both;
} Los ítems son sencillas cajas rectangulares con separaciones entre ellas, que se ven disminuidas a raíz de la selección del ítem:
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;
}En esta parte aplicamos las transiciones (para que todos los efectos incluido los de invert sean progresivos), escalando el contenido un poco mediante el scale(1.05) y le agregamos un poco de sombra al ítem; todo esto mediante el evento hover.
article.item:hover{
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
} Como mencionamos antes, hay otra transición y cambio de estados en los elementos que no han sido seleccionados, a estos son los que le aplicamos un poco de Blur y el filtro invert o para invertir los colores al 100%; además de que escalamos para hacerlos un poco más pequeños como mostramos a continuación:
article.blur{
filter: invert(100%);
transform: scale(0.95);
}Los demás estilos son de fácil compresión y por lo tanto obviamos su explicación; ahora, el JavaScript.
El JavaScript de los Items para invertir los colores de los items de-seleccionados:
// 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 JavaScript anterior solo se encarga de buscar el resto de los elementos que no han sido seleccionados y aplicamos un estilo, aquí es un buen ejemplo de que hay cosas que con CSS son imposibles o muy difíciles de hacer; es decir, como creo que es difícil de aplicar lo anterior mediante un selector, entonces lo hacemos con JavaScript; aplicamos una clase que llamamos "blur" a los ítems que no fueron seleccionados y también aplicamos el filtro invert y se la quitamos cuando no exista elemento seleccionado.
Uso combinado con transiciones
Para que el efecto no sea brusco, conviene añadir una transición:
img {
filter: invert(0%);
transition: filter 0.5s ease-in-out;
}Aplicar el filtro invert con hover
Uno de los usos más atractivos del filtro invert es activarlo al pasar el cursor.
Activar invert al pasar el cursor
img:hover {
filter: invert(100%);
}Esto crea un efecto visual inmediato que destaca la imagen.
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.
Invertir colores en varios elementos (ejemplo avanzado)
En uno de mis experimentos, quise crear un efecto donde el elemento seleccionado destaque, mientras que los demás se atenúan visualmente.
Escalado, sombras y efecto de foco visual
Cada ítem:
- Se escala ligeramente al hacer hover
- Mantiene sus colores originales
- Los demás elementos se invierten y reducen
article.item {
transition: box-shadow 2s, transform 500ms, filter 500ms ease-in-out;
}
article.item:hover {
transform: scale(1.05);
}
article.blur {
filter: invert(100%);
transform: scale(0.95);
}Uso de clases dinámicas para elementos no seleccionados
Aquí es donde entra JavaScript para hacer lo que solo con CSS sería muy complicado:
// Seleccionamos todos los elementos con la clase .item
const items = document.querySelectorAll('.item');
items.forEach(item => {
// Evento cuando el ratón entra (mouseenter)
item.addEventListener('mouseenter', () => {
items.forEach(el => {
// Si el elemento no es el que tiene el mouse encima, le pone 'blur'
if (el !== item) {
el.classList.add('blur');
}
});
});
// Evento cuando el ratón sale (mouseleave)
item.addEventListener('mouseleave', () => {
items.forEach(el => {
el.classList.remove('blur');
});
});
});El resultado es un efecto visual muy llamativo donde el foco se centra claramente en el elemento activo.
Filtro invert con SVG: alternativa
CSS no es la única forma de invertir colores. También podemos hacerlo con SVG filters usando feComponentTransfer.
Y aplicarlo así:
.filter {
filter: url("#invert");
}Cuándo usar SVG en lugar de CSS
- Cuando necesitas compatibilidad con flujos gráficos complejos
- Cuando ya trabajas con SVG
- Cuando quieres reutilizar filtros como recursos
Para la mayoría de los casos, filter: invert() es suficiente, pero conocer esta alternativa suma puntos técnicos.
- filter vs backdrop-filter: cuándo usar cada uno
- filter → afecta al elemento y a su contenido
backdrop-filter → afecta solo al fondo visual detrás del elemento
Ejemplo:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: invert(100%);
}Esto es especialmente útil en diseños modernos tipo glassmorphism.
Casos prácticos y usos reales del filtro invert en CSS
Algunos usos donde el filtro invert resulta especialmente útil:
- Resaltar imágenes en galerías
- Crear efectos hover sin imágenes alternativas
- Simular temas oscuros rápidamente
- Generar contrastes visuales sin modificar recursos
- Interfaces interactivas con foco visual claro
Errores comunes y buenas prácticas
Evita:
- Usar invert(100%) en textos largos (reduce legibilidad)
- Combinarlo con demasiados filtros a la vez
- Olvidar las transiciones
Buenas prácticas:
- Usa valores intermedios
- Combínalo con transition
- Prueba siempre en diferentes imágenes
Preguntas frecuentes sobre invert() en CSS
- ¿Invert() funciona solo con imágenes?
- No, funciona con cualquier elemento HTML.
- ¿Puedo animar invert()?
- Sí, usando transition o animation.
- ¿Es compatible con todos los navegadores modernos?
- Sí, desde hace años (Chrome, Firefox, Safari, Edge).
Conclusión
El filtro invert (invertir) 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.
Acepto recibir anuncios de interes sobre este Blog.
Se explica cómo emplear el filtro invert de CSS en imágenes, hacemos varios ejemplos con el filtro invert de CSS3 junto con el hover, transiciones, y un ejemplo completo, el filtro invert invierte los colores de las imágenes.