CSS invert() Function

Last Updated : 30 Aug, 2024

The invert() function is an inbuilt function that is used to apply a filter to the image to set the invert of the color of the sample image.

Syntax:

invert( amount )

Parameters: This function accepts single parameter amount which holds the amount of conversion. The value of invert is set in terms of value and percentage. The value 0% represents original image and 100% represents the inverted image. The invert() function internally uses the following formula, to computer the inverse of the image:

amount * (255 - value) + (1 - amount) * value

The value of inversion is controlled by the variable amount, the variable value lies between 0 - 1(floating) range (this is done by converting the passed percentage of color inversion to a value between 0-1). The value is the color value of the pixel. (255-value) gives the color after subtracting the color value with the max pixel value, assumes that the value of the pixel is in the range 0 - 255 (though input image sample space could be stretched/scaled to meet the specified criteria). Below is a table containing a list of inversion percentages and the result they produce.

Inversion	Result
0%	Original Image
50%	Image with each pixel having grey color
100%	Completely inverted Image

Below example illustrates CSS invert() function in CSS:

Example:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>CSS invert() Function</title> 
    
    <style>
        h1 {
            color:green;
        }
        body {
            text-align:center;
        }
        .invert_effect {
            filter: invert(100%);
        }
    </style>
</head> 

<body> 
    <h1>GeeksforGeeks</h1> 
    
    <h2>CSS invert() function</h2>
    
    <img class="invert_effect" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Output:

Supported Browsers: The browsers supported by invert() function are listed below:

Google Chrome 18 and above
Edge 12 and above
Internet Explorer not supported
Firefox 35 and above
Safari 6 and above
Opera 15 and above

jit_t

Improve

Article Tags :

Similar Reads

CSS attr() Function

The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.Syntax: attr( attr_name )Parameter: This function accepts a single parameter attr_name which is used to hold the name of the attribute in an HTML element. It is a mandatory parameter.Ret

CSS blur() Function

The CSS blur() function applies a Gaussian blur effect to an element, making it appear out of focus. It is used with the filter property and accepts a length value defining the blur radius. CSS blur() function is part of the CSS filter property, which allows you to apply graphical effects like blurr

CSS brightness() Function

The brightness() function is an inbuilt function which is used to apply a filter to set the brightness of the image. This function uses the linear multiplier to the image to increase or decrease brightness. Syntax: brightness( amount ) Parameters: This function accepts single parameter amount which

CSS calc() Function

The calc() function is an inbuilt CSS function used to perform calculations to determine CSS property values dynamically. This function allows combining different units, such as percentages and pixels, using basic arithmetic operations like addition, subtraction, multiplication, and division. This a

CSS circle() function

The circle() function is an inbuilt function in CSS that is used to create floating text around the circular shape picture or anything else. Syntax: circle(100px at 10px 150px); or circle( percentage ); Parameters: This function accepts a single parameter length or percentage which is used to hold t

CSS conic-gradient() Function

The conic-gradient() function is an inbuilt function in CSS that is used to set a conic gradient as the background image. The conic gradient angle starts from 0 degrees - 360 degrees. Conic are circular and use the center of the element as the source point for color stop. Conic Gradients include pie

CSS contrast() Function

The contrast() function is an inbuilt function which is used to apply a filter to set the contrast of the image. This function adjusts the contrast of the image. Syntax: contrast( amount ) Parameters: This function accepts single parameter amount which holds the amount of contrast. The value of cont

CSS cubic-bezier() Function

The cubic-bezier() function is an inbuilt function in CSS that is used to define a Cubic Bezier curve. A Bezier curve is a mathematically defined curve used in two-dimensional graphic applications like adobe illustrator, Inkscape, etc. The curve is defined by four points: the initial position and th

CSS drop-shadow() Function

The CSS drop-shadow() function adds a shadow effect to elements, like images, using horizontal and vertical offsets, blur radius, spread radius, and color parameters. It enhances visual depth and prominence in web design.Syntax:filter: drop-shadow(offset-x offset-y blur-radius spread-radius color);P

CSS ellipse() Function

The ellipse() function is an inbuilt function in CSS used to create floating text around the ellipse shape picture or anything else. Syntax:circle(100px 10 px at 10px 150px);orellipse( percentage percentage );Parameter: This function accepts a single parameter length or percentage which is used to h