CSS invert() Function

CSS invert() Function

The CSS invert() function reverses the colors of an element or image by applying a color inversion filter.

It is used with the filter and backdrop-filter properties. The amount of inversion can be controlled using a number or percentage, from no change to complete color inversion.

Syntax

invert()
invert(amount)

The optional amount parameter specifies how strongly the colors are inverted.

For example:

.image {
  filter: invert(100%);
}

This completely inverts the colors of the image.

Additional examples:

filter: invert(0);
filter: invert(0.25);
filter: invert(50%);
filter: invert(0.75);
filter: invert(1);
filter: invert();
filter: invert(100%);

When the argument is omitted, invert() defaults to complete inversion.

The function returns a CSS <filter-function> value.

Parameters

The invert() function accepts one optional parameter.

Common values include:

Negative values are invalid. Values above 1 or 100% are permitted but are clamped to complete inversion for the effect.

How It Works

The invert() function changes each color channel in the rendered image according to the specified inversion amount.

At complete inversion, each RGB channel is replaced by its opposite value.

For example:

Original RGB: rgb(255, 0, 0)
Inverted RGB: rgb(0, 255, 255)

Red becomes cyan because the red channel changes from 255 to 0, while the green and blue channels change from 0 to 255.

At 50% inversion, all RGB channel values move to their midpoint, producing a neutral gray appearance.

The filter operates on the rendered pixels rather than changing the underlying CSS color declarations or the original image file.

Removing the filter restores the original appearance.

Inversion Values

The amount determines how much of the original color is replaced by its inverted equivalent.

For example:

.original { filter: invert(0%); }
.partial { filter: invert(25%); }
.half { filter: invert(50%); }
.strong { filter: invert(75%); }
.complete { filter: invert(100%); }

At 50%, the filter maps RGB color channels toward the midpoint, so fully opaque colored pixels become gray regardless of their original hue.

Transparency is preserved by the inversion operation.

Numbers and Percentages

The invert() function accepts either a unitless number or a percentage.

These pairs are equivalent:

invert(0) = invert(0%)
invert(0.25) = invert(25%)
invert(0.5) = invert(50%)
invert(0.75) = invert(75%)
invert(1) = invert(100%)

For example:

.image-a {
  filter: invert(0.6);
}
.image-b {
  filter: invert(60%);
}

Both images receive the same 60% inversion effect.

Values greater than 100% do not produce additional inversion:

.image {
  filter: invert(150%);
}

The specified value is allowed, but the inversion effect is limited to 100%.

Negative values are invalid:

filter: invert(-20%);

Use values between 0% and 100% for predictable results.

How Colors Change

Complete inversion produces complementary RGB channel values.

For example:

.color-box {
  background-color: red;
  filter: invert(100%);
}

The rendered red background appears cyan.

Because the filter affects the rendered result, any text, borders, and other visible content inside the filtered element are also inverted.

Inverting Images

The invert() function is commonly applied to images.

For example:

.photo {
  filter: invert(100%);
}

This reverses the colors of the entire image.

A partial inversion produces a less extreme effect:

.photo {
  filter: invert(30%);
}

The filter can be applied to an HTML image element:

<img class="photo" src="photo.jpg" alt="Example photograph">

The image file itself is not modified. The inversion is applied during rendering.

CSS inversion can be useful for decorative images, icons, and visual effects, but it may produce unnatural colors in photographs.

Inverting Elements

The invert() function can be applied to an entire HTML element, including its rendered background, text, borders, and descendants.

For example:

.panel {
  background-color: #222;
  color: #fff;
  filter: invert(100%);
}

The dark background appears light, while the white text appears dark.

Another example:

.button {
  background-color: #0066cc;
  color: white;
  border: 2px solid #003366;
  filter: invert(100%);
}

The button's background, text, and border colors are all inverted.

The filter does not selectively invert one CSS property. To change individual colors, update the corresponding CSS declarations instead.

Using backdrop-filter

The backdrop-filter property applies filters to the area behind an element rather than to the element's own content.

For example:

.overlay {
  background-color: rgb(255 255 255 / 20%);
  backdrop-filter: invert(100%);
}

This inverts the backdrop visible through the overlay.

The overlay's own text and content are not inverted by backdrop-filter.

A transparent or partially transparent background is generally needed for the backdrop effect to remain visible.

For example:

.glass-panel {
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: invert(50%) blur(5px);
}

This combines partial inversion with a blur effect on the backdrop.

The filter and backdrop-filter properties use similar filter functions but affect different rendered content.

Combining Filters

The invert() function can be combined with other CSS filter functions.

For example:

.image {
  filter: invert(100%) grayscale(100%);
}

This completely inverts the colors and applies a grayscale effect.

Another example combines inversion with brightness:

.image {
  filter: invert(75%) brightness(120%);
}

Multiple filter functions are separated by spaces.

Filters are applied in the order they appear, so changing their order can change the final result.

For example:

filter: invert(100%) brightness(150%);
filter: brightness(150%) invert(100%);

These expressions may produce different colors because the second function processes the output of the first.

Other compatible filter functions include contrast(), sepia(), saturate(), and hue-rotate().

Using Custom Properties

CSS custom properties can control the amount of inversion.

For example:

.image {
  --invert-amount: 50%;
  filter: invert(var(--invert-amount));
}

Changing the custom property updates the filter amount.

Different elements can use different values:

.image-light {
  --invert-amount: 25%;
}
.image-dark {
  --invert-amount: 100%;
}

Custom properties are useful when a filter amount is shared across multiple components.

For example, a reusable icon class can use:

.icon {
  filter: invert(var(--icon-invert, 0%));
}

The fallback value of 0% is used when --icon-invert is not defined.

Transitions and Animations

The invert() function can be animated by changing the filter property.

For example:

.image {
  filter: invert(0%);
  transition: filter 0.4s ease;
}
.image:hover {
  filter: invert(100%);
}

The image gradually changes from its original colors to completely inverted colors when hovered.

Keyframe animations can also be used:

@keyframes invert-colors {
  from {
    filter: invert(0%);
  }
  to {
    filter: invert(100%);
  }
}
.image {
  animation: invert-colors 2s ease-in-out infinite alternate;
}

The animation alternates between the original and inverted appearance.

For accessibility, consider reducing or disabling nonessential animations when the user prefers reduced motion.

Example

This example compares the original colors with different inversion amounts.

HTML:

<div class="invert-demo">
  <div class="invert-demo-item">
    <div class="invert-demo-colors invert-demo-zero"></div>
    <span>invert(0%)</span>
  </div>
  <div class="invert-demo-item">
    <div class="invert-demo-colors invert-demo-quarter"></div>
    <span>invert(25%)</span>
  </div>
  <div class="invert-demo-item">
    <div class="invert-demo-colors invert-demo-half"></div>
    <span>invert(50%)</span>
  </div>
  <div class="invert-demo-item">
    <div class="invert-demo-colors invert-demo-full"></div>
    <span>invert(100%)</span>
  </div>
</div>

CSS:

.invert-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 440px;
  margin: 0 auto;
}
.invert-demo-item {
  min-width: 0;
  padding: 8px;
  background-color: #f1f3f5;
  text-align: center;
}
.invert-demo-colors {
  height: 90px;
  background: linear-gradient(90deg, #ff0000 0 33.33%, #00ff00 33.33% 66.66%, #0000ff 66.66% 100%);
}
.invert-demo-item span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.invert-demo-zero { filter: invert(0%); }
.invert-demo-quarter { filter: invert(25%); }
.invert-demo-half { filter: invert(50%); }
.invert-demo-full { filter: invert(100%); }

The first example displays the original red, green, and blue colors. At 25%, the colors move toward their opposites. At 50%, the colors become gray. At 100%, the colors are fully inverted.

Hover Example

This example demonstrates a color inversion effect when hovering over an element.

HTML:

<div class="invert-hover-demo">
  <strong>Hover Over This Box</strong>
  <span>The colors will invert smoothly.</span>
</div>

CSS:

.invert-hover-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  min-height: 140px;
  margin: 0 auto;
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
  cursor: pointer;
  filter: invert(0%);
  transition: filter 0.4s ease;
}
.invert-hover-demo:hover {
  filter: invert(100%);
}
.invert-hover-demo span {
  margin-top: 8px;
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .invert-hover-demo {
    transition: none;
  }
}

Hovering over the box gradually inverts its blue background and white text. Moving the pointer away restores the original colors.

invert() vs. Other Filters

The invert() function changes colors differently from other CSS filter functions.

For example:

.image-a { filter: invert(100%); }
.image-b { filter: grayscale(100%); }
.image-c { filter: sepia(100%); }
.image-d { filter: hue-rotate(180deg); }

Each function produces a different visual result.

Use invert() when the goal is to reverse color channel values rather than simply adjust brightness, saturation, or hue.

Common Uses

The invert() function can be used for several visual effects.

For example:

.icon {
  filter: invert(100%);
}

This can turn a black icon white without editing its source image.

For complex multicolored icons, inversion may produce unexpected colors. Separate icon assets or CSS color controls may be more appropriate.

Limitations

The invert() function has several important rules and limitations.

• It accepts only one optional number or percentage argument.
• Negative inversion amounts are invalid.
• Values greater than 100% are clamped to 100% for the effect.
• When the argument is omitted, the function applies complete inversion.
• It affects the rendered result, including descendants, rather than changing individual CSS color declarations.
• It does not modify the original image file.
• It may produce unnatural colors in photographs or multicolored graphics.
• It does not automatically create an accessible dark theme.
• Filter combinations can produce different results depending on their order.

For example, this is valid:

filter: invert(75%);

The following is invalid because a negative amount is not allowed:

filter: invert(-50%);

The following is invalid because the function accepts only one argument:

filter: invert(50%, 100%);

Use a single nonnegative number or percentage, or omit the argument for complete inversion.

Browser Support

The CSS invert() function is Baseline Widely available. It has been supported across major browser engines since September 2016.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support invert() with the filter property.

For example:

.image {
  filter: invert(100%);
}

Support for backdrop-filter has a separate compatibility history and should be checked independently when using invert() on backdrops.

For current compatibility information, visit Can I Use? and search for CSS invert().

Specifications

The invert() function is defined in the Filter Effects Module Level 1 .

The specification defines its accepted values, default inversion amount, and how the function transforms rendered color samples.

Related CSS functions include grayscale(), sepia(), hue-rotate(), brightness(), and contrast().