As we've seen in numerous articles, CSS has evolved to the point where we no longer depend on external tools like Photoshop or GIMP to apply interesting visual effects, including all kinds of filters directly in CSS. In my case, one of the things that most caught my attention when I started experimenting with CSS filters was how easy it is to invert colors directly from the browser, with just one line of code.
In this article, I explain what the invert filter in CSS is, how it works internally, how to use it correctly, and several real-world examples, from the most basic to an advanced one with multiple elements.
The invert() filter is a clear example of this: simple, powerful, and with practical uses in both images and complete interfaces.
What is the invert filter in CSS and what is it for?
The invert() filter is a CSS function belonging to the CSS Filter Effects module and is used to invert the colors of an element.
When we apply filter: invert() to an image or HTML element:
- Light colors become dark
- Dark colors become light
- The process is performed in real-time without modifying the original image
This makes it an ideal solution for:
- Creating attractive visual effects
- Highlighting elements on hover
- Simulating dark modes
- Altering visual states without duplicating graphic resources
How invert() works: simple RGB explanation
The filter inverts each RGB color channel.
The filter we are going to see today is called invert, belonging to the CSS family; it allows inverting the colors of an image—it's that simple—it inverts the RGB channel (or any other used) with just one CSS rule; if we have an image where one of its colors is black; that is:
rgb(0, 0, 0);Then what we will get will be a white color:
rgb(255, 255, 255);Of course, the same happens with other color scales; for example, if we have a soft gray:
rgb(232, 230, 232);Then what we get will be a dark color:
rgb(23, 25, 23);In short, what this filter does is subtract the value of one channel at a time from 255; for example:
255 - 232 = 23In summary:
The logic of subtracting from 255
Each RGB color is composed of values between 0 and 255:
- Black → rgb(0, 0, 0)
- White → rgb(255, 255, 255)
If we have a black pixel:
rgb(0, 0, 0)
By applying the invert filter, we get:
rgb(255, 255, 255)
And vice-versa, if we start from white, the result will be black.
With intermediate colors, exactly the same thing happens. For example, a soft gray:
rgb(232, 230, 232)
After applying invert(), the browser calculates:
255 - 232 = 23 | 255 - 230 = 25 | 255 - 232 = 23Result:
rgb(23, 25, 23)That is, the filter subtracts each channel from 255, one by one.
What happens with intermediate values (25%, 50%, 75%)
The invert filter doesn't have to be applied at 100%. We can use intermediate values, and this is where the actual formula used by the browser comes into play:
amount * (255 - value) + (1 - amount) * valueWhere:
- amount is the inversion value (from 0 to 1)
- value is the original channel value
This explains why:
- 0% → no changes
- 50% → the image tends toward gray tones
- 100% → total inversion
In practice, this allows for much more subtle and controlled effects.
How does the invert filter work in CSS?
Recalling its operation; the filter consists of using the invert property on our image:
img { filter: invert(value);}Allowed values: percentage vs number
You can specify the value in two ways:
filter: invert(0.6); filter: invert(60%);Both lines do exactly the same thing.
Common values:
- invert(0) or invert(0%) → no effect
- invert(0.5) or invert(50%) → partial effect
- invert(1) or invert(100%) → total inversion
Here we see that we use the value of 100%:
img { filter: invert(100%);}We can indicate in what proportion we want the colors to be inverted, whether doing a complete flip as specified before or a smaller percentage.
Of course, there are many other filters: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert; but in this article, the filter of interest is inversion.
In this section, we are going to use the filter in some examples to get a better idea of how this simple but attractive filter works.
Difference between invert(1) and invert(100%)
There is no functional difference. CSS allows both formats for convenience and consistency with other filters like contrast() or brightness().
Inverting the colors of our images with the invert filter
The simplest of all consists of applying total inversion to all the colors of our image:
img { filter: invert(100%);}
Although we can use less: for example, 66%:
Or 50%:
Or 25%:
In general, any value we consider to be between 0 and 100%.
Another possible use could be activating the inversion or invert filter when hovering the cursor over the image; we achieve this using the :hover selector.
img:hover { filter: invert(100%);}
And we can enhance it with CSS transitions, which we have also covered before:
In this example, we have used an invert filter at 100%, but it is up to you what proportion you wish to use.
Combined use with transitions
This third example is a bit more interesting; we will show you how to create a simple effect to invert colors on text boxes (div elements with some content; text and images for this example), or rather, their images; we will call these boxes 'items'; basically, the items will be scaled up slightly and the invert filter will be applied (to the images) to invert the colors as seen in previous examples; additionally, we will use transitions to 'smooth' the transition from one state to another and jQuery code to apply the respective blur class to certain items.
The idea is that when placing the cursor over an item (hover), this item will scale to a slightly larger size; then we apply the invert filter through a transition to the non-selected items; therefore, it gives the sensation that the item is coming out of its grid and rising above the others with a characteristic effect where the image goes from having inverted colors to having completely normal ones.
This is the final result:
Augmented Reality with Vuforia
Multiple borders in a container
Multiple animated backgrounds with CSS
The HTML5 Progress Bar element
First steps with HTML5 SVGs
Responsive videos for YouTube: CSS and JavaScript
Let's start!
A traditional HTML; we have a main or principal tag; inside this tag, we will have our items or text boxes with some interesting content.
<main class="content">
<article class="item">
<a href="">
<h6>Título</h6>
<p>Texto.</p>
</a>
</article>
<article class="item">
<!-- Mas articulos -->
</article>
</main>In this section, we will explain what would be the heart of our experiment; the CSS where we define the basic model and rules so that it looks how we want when positioning (hover) over the elements and applying the corresponding style to the non-selected elements which we link a bit later with JavaScript.
With this, we will create a container no more than 500px wide and centered; we will also add more styles although you can customize it however you want; this container will have a collection of items to which the CSS invert filter will be applied:
.content{
max-width:500px;
width:80%;
height:auto;
padding:20px;
background:#CCC;
margin: 0 auto;
}Since we are using floating content, for it to be accounted for by its container we must apply a small trick using the before and after selectors:
.content:before,
.content:after {
content: "";
display: block;
clear: both;
} The items are simple rectangular boxes with gaps between them, which are reduced as a result of item selection:
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;
}In this part, we apply the transitions (so that all effects including invert are progressive), scaling the content slightly via scale(1.05) and adding a bit of shadow to the item; all this through the hover event.
article.item:hover{
transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
} As mentioned before, there is another transition and change of states in the elements that have not been selected; to these we apply a bit of Blur and the invert filter or color inversion at 100%; also we scale them to make them a bit smaller as shown below:
article.blur{
filter: invert(100%);
transform: scale(0.95);
}The other styles are easy to understand and therefore we skip their explanation; now, the JavaScript.
The JavaScript for the Items to invert the colors of de-selected items:
// We select all elements with the class 'item'
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('mouseenter', () => {
items.forEach(el => {
if (el !== item) {
el.classList.add('blur');
}
});
});
item.addEventListener('mouseleave', () => {
items.forEach(el => {
el.classList.remove('blur');
});
});
});The previous JavaScript only takes care of finding the rest of the elements that have not been selected and applying a style; this is a good example of things that are impossible or very difficult to do with CSS; that is, as I believe it is difficult to apply the above using a selector, we do it with JavaScript; we apply a class we call "blur" to the items that were not selected and also apply the invert filter and remove it when no element is selected.
Combined use with transitions
To prevent the effect from being abrupt, it is advisable to add a transition:
img { filter: invert(0%); transition: filter 0.5s ease-in-out;}Applying the invert filter with hover
One of the most attractive uses of the invert filter is activating it on hover.
Activate invert on hover img:hover { filter: invert(100%);}This creates an immediate visual effect that highlights the image.
Smoothing the effect with transition
img { filter: invert(0%); transition: filter 0.5s ease;}
img:hover { filter: invert(100%);}This small detail makes a big difference in the visual experience.
Inverting colors on several elements (advanced example)
In one of my experiments, I wanted to create an effect where the selected element stands out while the others are visually dimmed.
Scaling, shadows, and visual focus effect
Each item:
- Scales slightly on hover
- Maintains its original colors
- The other elements are inverted and shrunk
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);
}Use of dynamic classes for non-selected elements
This is where JavaScript comes in to do what would be very complicated with CSS alone:
// We select all elements with the .item
const items = document.querySelectorAll('.item');
items.forEach(item => {
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');
}
});
});
item.addEventListener('mouseleave', () => {
items.forEach(el => {
el.classList.remove('blur');
});
});
});The result is a very striking visual effect where the focus is clearly centered on the active element.
Invert filter with SVG: alternative
CSS is not the only way to invert colors. We can also do it with SVG filters using feComponentTransfer.
And apply it like this:
.filter { filter: url("#invert");}When to use SVG instead of CSS
- When you need compatibility with complex graphic workflows
- When you are already working with SVG
- When you want to reuse filters as resources
For most cases, filter: invert() is sufficient, but knowing this alternative adds technical points.
- filter vs backdrop-filter: when to use each
- filter → affects the element and its content
backdrop-filter → affects only the visual background behind the element
Example:
div.transbox { background-color: rgba(255, 255, 255, 0.4); backdrop-filter: invert(100%);}This is especially useful in modern glassmorphism-type designs.
Practical cases and real uses of the invert filter in CSS
Some uses where the invert filter is particularly useful:
- Highlighting images in galleries
- Creating hover effects without alternative images
- Simulating dark themes quickly
- Generating visual contrasts without modifying resources
- Interactive interfaces with clear visual focus
Common errors and best practices
Avoid:
- Using invert(100%) on long texts (reduces legibility)
- Combining it with too many filters at once
- Forgetting transitions
Best practices:
- Use intermediate values
- Combine it with transition
- Always test on different images
Frequently asked questions about invert() in CSS
- Does invert() work only with images?
- No, it works with any HTML element.
- Can I animate invert()?
- Yes, using transition or animation.
- Is it compatible with all modern browsers?
- Yes, for years (Chrome, Firefox, Safari, Edge).
Conclusion
The invert filter in CSS is a simple but extremely powerful tool. In my experience, it is one of those effects that, when well-used, can completely transform the visual perception of an interface with minimal effort.
I agree to receive announcements of interest about this Blog.
It explains how to use the CSS invert filter on images, we do several examples with the CSS3 invert filter along with hover, transitions, and a complete example, the invert filter inverts the colors of the images.