CSSinvert() Function
Example
Invert the colors of an image:
#img1 {
filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
}
Try it Yourself »filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
}
More "Try it Yourself" examples below.
Definition and Usage
The CSSinvert() filter function inverts the color of an image.
- 100% (1) will make the image completely inverted
- 0% (0) will have no effect
| Version: | CSS Filter Effects Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| invert() | 18 | 12 | 35 | 6 | 15 |
CSS Syntax
invert(amount)
| Value | Description |
|---|---|
| amount | Optional. Specifies the invert as a number or percent. 100% (1) will make the element completely inverted. 0% (0) represents the original image (no effect). Default value is 0. |
More Examples
Example
Use invert() with thebackdrop-filter property:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: invert(100%);
backdrop-filter: invert(100%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
Try it Yourself »background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: invert(100%);
backdrop-filter: invert(100%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
Related Pages
CSS reference:CSS filter property.
CSS reference:CSS blur() function.
CSS reference:CSS brightness() function.
CSS reference:CSS contrast() function.
CSS reference:CSS drop-shadow() function.
CSS reference:CSS grayscale() function.
CSS reference:CSS hue-rotate() function.
CSS reference:CSS opacity() function.
CSS reference:CSS saturate() function.
CSS reference:CSS sepia() function.
