How filter property works in CSS?

CSS filter property: In this tutorial, we will learn about the CSS filter property, its syntax, parameters, and examples. Learn how filter property works? By Apurva Mathur Last updated : July 26, 2023

As we all know CSS provides us with many properties which help us to design a webpage more creatively but do you know CSS not only designs a webpage, but it also edits the picture. It may sound weird, but the CSS filter property helps us to edit the picture according to our needs. We can add any number of values inside a picture to make it look more admirable.

CSS filter Property

The CSS filter property applies filters on a specific image, like we edit the picture on the mobile we increase or decrease the saturation/contrast/grayscale, etc, exactly in the same way we can apply all these values in CSS with the help of filter property which provides us many values like Saturation, contrast, Grayscale, opacity, hue-rotate, etc.

CSS filter Property Syntax

Below is the syntax of the filter property:

filter: value ( %/px);

The filter property has many values which all give a different result. The values are Invert, saturation, contrast, blur, grayscale, hue-rotate, brightness, and sepia. All of these are common as we already use these terms in our day-to-day life.

In the code given below, I've explained all the values you can change the intensity according to your desire.

Example of CSS filter Property

Consider the below-given example in which we are applying filter property on the images with different saturation/contrast/grayscale.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         img{
         margin: 20px;
         }
         img.normal{
         margin-left: 30%;
         width: 150px;
         height: 150px;
         }
         img.invert {
         width: 150px;
         height: 150px;
         filter: invert(150%);
         }
         img.blur {
         width: 150px;
         height: 150px;
         filter: blur(10px);
         }
         img.brightness {
         width: 150px;
         height: 150px;
         filter: brightness(20%);
         }
         img.contrast {
         width: 150px;
         height: 150px;
         filter: contrast(40%);
         }
         img.grayscale {
         width: 150px;
         height: 150px;
         filter: grayscale(80%);
         }
         img.hue-rotate {
         width: 150px;
         height: 150px;
         filter: hue-rotate(240deg);
         }
         img.opacity {
         width: 150px;
         height: 150px;
         filter: opacity(50%);
         }
         img.saturate {
         width: 150px;
         height: 150px;
         filter: saturate(150%);
         }
         img.sepia {
         width: 150px;
         height: 150px;
         filter: sepia(70%);
         }
      </style>
   </head>
   <body>
      <span>
         <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">
         <h6>Normal Image</h6>
         <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">
         <img class="blur" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="brightness" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="contrast" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="grayscale" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="hue-rotate" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="opacity" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="saturate" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
         <img class="sepia" 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:

One by one all the values are used, the first picture is the normal picture no property is applied to that, and the rest of the pictures are edited pictures.

CSS Examples »

How to create rounded and circular images with CSS?

Applying Hue Rotation on Image using CSS3