index.md

title	slug	page-type	browser-compat
invert()	Web/CSS/filter-function/invert	css-function	css.types.filter-function.invert

{{CSSRef}}

The invert() CSS function inverts the color samples in the input image. Its result is a {{cssxref("<filter-function>")}}.

{{EmbedInteractiveExample("pages/css/function-invert.html")}}

Syntax

invert(amount)

Parameters

• amount
  • : The amount of the conversion, specified as a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is 0.

Examples

Examples of correct values for invert()

invert(0)     /* No effect */
invert(.6)    /* 60% inversion */
invert(100%)  /* Completely inverted */

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

The other {{cssxref("<filter-function>")}} functions available to be used in values of the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties include:

• {{cssxref("filter-function/blur", "blur()")}}
• {{cssxref("filter-function/brightness", "brightness()")}}
• {{cssxref("filter-function/contrast", "contrast()")}}
• {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
• {{cssxref("filter-function/grayscale", "grayscale()")}}
• {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
• {{cssxref("filter-function/opacity", "opacity()")}}
• {{cssxref("filter-function/saturate", "saturate()")}}
• {{cssxref("filter-function/sepia", "sepia()")}}