How filter property works in CSS?

In this article, we'll learn about the CSS filter property, how it works?
Submitted by Apurva Mathur, on July 27, 2022

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.

Here, we'll learn about the filter property which 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.

Syntax:

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.

HTML and CSS code to demonstrate the example of filter property

<!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>

Output:

Example: CSS filter property

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 Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.