How to add visual effects to images with CSS?

In this tutorial, we will learn how to add visual effects to images with CSS? By Apurva Mathur Last updated : July 26, 2023

Appearance is one of the most important aspects of a website. Visual appeal is what meets the eye. It's the colors, shapes, pictures, fonts, white space, and overall visual balance of a design. Whether a website appeal to us affects how we perceive it, how we use it, and how we remember it.

Appearance says a lot about your website that is the one thing that attracts the attention of the audience. This is key to getting visitors engaged with your website. We like to look at pretty things and if we have the choice, we always prefer an attractive design or image over an ugly or neutral one.

Adding visual effects to images with CSS

Adding visual effects to a normal image can also attract the audience, if used correctly and we can easily add visual effects to any image using the filter property, filter property has many values, and one of the values is inverted. Invert is reversing the color of an image or video. When referring to an image, this is often called a negative. This value adds visual effects to the images.

Syntax to add visual effects to images

Below is the syntax to add visual effects to images:

filter:invert (value %)

The maximum value of this property is 100%; this will perfectly add visual effects to an image. You can reduce the value and see the changes accordingly.

Example to add visual effects to images with CSS

Consider the below-given example to add visual effects to images with the help of CSS. See, how images look like after adding visual effects.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      img{
      margin: 20px;
      }
      .normal{
      width: 600px;
      height: 500px;
      }
      img.invert {
      width: 600px;
      height: 500px;
      filter:invert(100%);
      }
    </style>
  </head>
  <body>
    <span>
      <center>
        <h1>Orignal Image VS Invert filter property</h1>
      </center>
      <img class="normal" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
      <img class="invert" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
    </span>
  </body>
</html>

The output of the above example is:

CSS Examples »

How to change the thickness of <hr> tag?

How to create a black and white image with CSS?