CSS Attributes Index   CSS Filters

---

Inverts the pixel colors of an input image to its complementary colors.

{ filter: invert(number | percentage) }

number

Absolute positive floating-point number or a relative percentage value.

The property is read/write with a default value of 1.

The invert( ) CSS function reverses the hue, saturation, and brightness values of a visual object, akin to creating a photograph negative.

The passed parameter defines the amount of deviation from the element’s said properties.

A value of 0 or 0% leaves the input unchanged, while a value of 1 or 100% completely transforms the image.

Values between 0 and 1 or between 0% and 100% have linear multipliers on the effect, except for a value of 0.5 or 50% which renders the image as a blank gray color.

Values more than 1 ( or >100% ) are ignored and render as 1 or 100%.

Negative values ( < 0 ) are ignored and render the element unchanged.

Invert with values between 0 and 1 or between 0% and 100%.

filter: invert(0)	filter: invert(.25)	filter: invert(.75)
filter: invert(30%)	filter: invert(60%)	filter: invert(100%)

Invert with a negative value or with a value more than 1 or more than 100%.

filter: invert(-10)	filter: invert(50)	filter: invert(200%)

grayscale   hue-rotate   opacity   saturate   sepia