CSS Function - invert()

Quiz

CSS invert() function inverts the colors of an element. It is used with the CSS filter property. A value of 0% keeps the element's original colors, while 100% fully inverts the color of an element.

CSS invert() function uses below mentioned formula for inversion:

New Value = (1 - amount) * original + amount * (255 - original)

Example

Let's understand the above formula with an example

Color value: (R: 4, G: 175, B: 47) and we are using invert(1).
Formula: (1 - amount) * original + amount * (255 - original)
Here amount = 1, Original R = 4, G = 175, B = 47

new_R = (1 - 1) * 4 + 1 * (255 - 4)= 0 + 251 = 251
new_G = (1 - 1) * 175 + 1 * (255 - 175) = 0 + 80 = 80
new_B = (1 - 1) * 47 + 1 * (255 - 47) = 0 + 208 = 208

So, the new color value will be (R: 251, G: 80, B: 208)

Syntax

The syntax for the CSS invert() function is as follows:

filter: invert(amount);

Parameter

CSS invert() function accepts a single optional parameter (amount) that specifies the inversion level of the element. If the amount is not specified, 0 is used as the default value.

Examples of CSS invert() Function

The following examples illustrate the use of the CSS invert() function. Images or elements can be color-inverted using the CSS invert() function.

Inverting the Image using invert() Function

In this example, we have set different levels of image inversion using the invert() function.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS invert() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: invert(0%);
        }
        .img2 {
            filter: invert(50%);
        }
        .img3 {
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <h2>CSS invert() Function</h2>
    <div class="container">
        <h3>Image at invert(0%): </h3>
        <img class="img1" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at invert(50%): </h3>
        <img class="img2" src="/html/images/test.png" alt="logo">
    </div>
    <div class="container">
        <h3>Image at invert(100%): </h3>
        <img class="img3" src="/html/images/test.png" alt="logo">
    </div>
</body>
</html>

Changing Inversion on Hover

In this example, we have changed the inversion of an image upon hovering over it using the CSS invert() function.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS invert() Function</title>
    <style>
        img:hover {
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <h2>CSS invert() Function</h2>
    <p>
        <strong>Hover over this image to invert its colors.</strong>
    </p>
    <img src="/css/images/logo.png" alt="logo">
</body>
</html>

Supported Browsers

Function
invert()	18	12	35	6	15

Print Page