EN
CSS - invert color
0
points
In this article, we would like to show you how to invert element colors using CSS.
Quick solution:
.inverted {
filter: invert(1); /* <----- 100% inversion */
}
.half-inverted {
filter: invert(50%); /* <----- 50% inversion */
}
Practical example
In this example, we present how to use the invert() filter with percentage and fractional values.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
img {
height: 100px;
margin: 5px;
}
.partly-inverted {
filter: invert(0.25); /* <----- 25% inversion */
}
.inverted {
filter: invert(100%); /* <----- 100% inversion */
}
</style>
</head>
<body style="display: flex">
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<img class="partly-inverted" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<img class="inverted" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>