CssHow-ToBeginner · 3 min read

How to Use Invert Filter in CSS: Syntax and Examples

Use the CSS filter: invert(%) property to invert the colors of an element. The value is a percentage where 0% means no change and 100% fully inverts all colors.

📐

Syntax

The invert() filter takes a percentage value that controls how much the colors are inverted.

invert(0%): No color change.
invert(100%): Full color inversion (black becomes white, blue becomes orange, etc.).
You can use any value between 0% and 100% for partial inversion.

css

selector {
  filter: invert(percentage);
}

💻

Example

This example shows a colored box with normal colors and the same box with full color inversion using filter: invert(100%).

css

html {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f0f0f0;
}

.box {
  width: 150px;
  height: 150px;
  margin: 10px;
  display: inline-block;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.normal {
  background-color: #3498db;
}

.inverted {
  background-color: #3498db;
  filter: invert(100%);
}

Output

Two square boxes side by side: the left box is bright blue with white text 'Normal', the right box is the color-inverted version showing an orange-ish background with black text 'Inverted'.

⚠️

Common Pitfalls

Common mistakes when using invert() include:

Using values outside the 0%–100% range, which will be ignored or cause unexpected results.
Forgetting that invert() affects all colors including text and images inside the element.
Not combining invert() with other filters properly if needed.

Example of wrong and right usage:

css

/* Wrong: value over 100% ignored */
.element-wrong {
  filter: invert(150%); /* Invalid, treated as 100% or ignored */
}

/* Right: valid value */
.element-right {
  filter: invert(75%); /* Partial inversion */
}

📊

Quick Reference

Property	Description	Example
filter: invert(%)	Inverts colors by given percentage	filter: invert(100%)
invert(0%)	No color change	filter: invert(0%)
invert(50%)	Half color inversion	filter: invert(50%)
invert(100%)	Full color inversion	filter: invert(100%)

✅

Key Takeaways

Use filter: invert(%) to invert colors of any element in CSS.

The value must be between 0% (no change) and 100% (full inversion).

Invert affects all colors inside the element, including text and images.

Avoid values outside 0%-100% to prevent unexpected behavior.

Combine invert with other filters carefully for desired effects.