How to invert the colors of an image in CSS

Hey Folks,
I am up with another tutorial of CSS. In this tutorial, we will learn how to invert the colors of an image in CSS.

Well, it can be done easily using software like Photoshop. Such software brings up the negative of the image which gives you the same view as we get by increasing the contrast of the image. But in this tutorial, we will learn how we can invert the colors of an image with the help of CSS.

Code to invert the colors of an image in CSS

invert.html file

<!DOCTYPE html>
<html>
<head>
  <title>Change colour of Scroll bar</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>The negative of the image is shown below</h2>
<img src="img2.jpg" alt="image">
</body>
</html>

style.css file

img{
  -webkit-filter: invert(100%);
  filter: invert(100%);
  height:500px;
  width: 500px;
}
body{
  margin: 0;
  padding: 0;
}
h2{
  position:absolute;
  top:50%;
  left:49%;
  transform:translate(-50%,-50%);
  color:#ed4e6e;
  font-family:arial;
  font-size:55px;
}

We have attached our CSS file to our HTML file with the help of link tag under the head section. But it is not necessary to make two different files for CSS and HTML. We can also do it on the same file by internal styling.

The image tag is used to display the image in the web browser. In the CSS file we can adjust our image look like we can set its height, width, transparency of the image, image alignment and many more formatting effects to make our image attractive.

The filter option under the image properties is used to invert the colors of the image. We can set it to our desired percentage like 50 percent. But we have to specify the height and width in pixels to be more precise.

invert color of image

So padding is the area outside our text which is assigned to it. To make our text more attractive we can add effects to it as we can set its position to either relative or absolute. We can also set its position by setting top and left margins in pixels.

I hope you have understood the code written in this tutorial. You can ask anything related to this tutorial just by typing and submitting in the comment box below.

You may also read,

 

Leave a Reply

Your email address will not be published. Required fields are marked *