Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set Invert Effect with CSS
The CSS filter: invert() property is used to map the colors of an element to their opposite values in the color spectrum, creating a negative image effect similar to film negatives.
Syntax
selector {
filter: invert(percentage);
}
Possible Values
| Value | Description |
|---|---|
0% |
No inversion (default) |
100% |
Complete color inversion |
50% |
Gray appearance |
Example: Image Invert Effect
The following example applies an invert filter to an image −
<!DOCTYPE html>
<html>
<head>
<style>
.original {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
margin: 10px;
border-radius: 10px;
}
.inverted {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
margin: 10px;
border-radius: 10px;
filter: invert(100%);
}
</style>
</head>
<body>
<div class="original"></div>
<div class="inverted"></div>
</body>
</html>
Two gradient boxes are displayed - the first shows the original red-to-teal gradient, and the second shows the same gradient with inverted colors (blue-green to orange).
Example: Text Invert Effect
The following example demonstrates invert effect on text elements −
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
padding: 20px;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #ff4444;
background-color: #f0f0f0;
border-radius: 8px;
margin: 10px 0;
}
.inverted-text {
filter: invert(100%);
}
</style>
</head>
<body>
<div class="text-container">Original Text</div>
<div class="text-container inverted-text">Inverted Text</div>
</body>
</html>
Two text boxes are shown - the first displays red text on a light gray background, while the second shows the same text with colors inverted (cyan text on a dark background).
Conclusion
The filter: invert() property provides an easy way to create negative effects on images, text, and other elements. Use values from 0% to 100% to control the intensity of the inversion effect.
Updated on: 2026-03-15T11:50:17+05:30
337 Views
Advertisements