Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

The CSS invert() Filter Function

This article demonstrates how to the use the CSS invert filter function on elements with CSS filter. Included is code and examples.

The invert function is a value of the CSS filter property. Invert, inverts the colors of the target HTML element. This can also include an image.

Syntax

filter: invert(value);

Parameters

  • value (required)

The value parameter of invert is a number or percentage. A value under 100% is less inverted, while a value at 100% is completely inverted. The value is a proportion of the invert conversion, which means 5% is only 5% inverted and is linear between 0% and 100%. Values over 100% are accepted but they are clamped to 1 and negative values are not allowed. The default value for invert is 1 when omitted and for interpolation the value is 0.

Examples

The examples below uses numbers and percentages values for the parameter of the invert filter function.

invert(0)       /* No effect */
invert(0%)      /* No effect */

invert(27%)     /* A invert of 27% */
invert(0.35)    /* A invert of 35% */
  
invert(0.6%)    /* A invert of 60% */
invert(12%)     /* A invert of 12% */
invert(0.18)    /* A invert of 18% */

invert(1)      /* A invert of 100% */
invert(100%)   /* A invert of 100% */

Usage

You can apply the invert filter to any element or image by using CSS selectors.

#element-id {
  filter: invert(25%);
}

img {
  filter: invert(0.64);
}

Try It

The CSS Invert Filter Function
The CSS Invert Filter Function

HTML

<div class="wrapper">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
</div>

CSS

.wrapper img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 20px;
  vertical-align: middle;
}

.wrapper img:nth-child(1) {
  filter: invert(0);
}

.wrapper img:nth-child(2) {
  filter: invert(50%);
}

.wrapper img:nth-child(3) {
  filter: invert(100%);
}

html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}

.wrapper {
  width: 100%;
  background: transparent;
  text-align: center;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}

Specifications

W3C CSS Filter Effects Module Level 1
#funcdef-filter-invert

Other Filter Functions