Filter in CSS

What is the filter?

  • The filter property is used to apply visual effects like blur or color shift to an element.

  • To use multiple filters, we can separate each filter with a space.


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Filter Property in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


Different filter functions

i) none: This is the default value which specifies no effects

.myImage {
            filter: none;
        }


ii) blur(px): It is used to apply a blur effect on the image. We can set blur using numbers. like: blue(9px).

.myImage {
            filter: blur(34px);
        }


iii) contrast(%): This is used to specify contrast. Where 0% will make the image completely black & 100% represents the original image.

.myImage {
            filter: contrast(53%);
        }


iv) opacity(%): Sets the opacity level for the image.

.myImage {
            filter: opacity(34%);
        }


v) invert(%): This will invert the samples in the image. 0% is the default which represents the original image & 100% will make the image completely inverted.

.myImage {
            filter: invert(34%);
        }


vi) saturate(%): This filter function will saturate the image. 0% will make the image completely un-saturated &  100% is the default which represents the original image.

.myImage {
            filter: saturate(43%);
        }


vii) drop-shadow(offset-x offset-y): This will apply a drop shadow effect to the image. And It is similar like box-shadow

.myImage {
            filter: drop-shadow(23px 43px 4px #4444df);
        }


viii) grayscale(%): This will convert the image to grayscale.

.myImage {
            filter: grayscale(53%);
        }


ix) hue-rotate(deg): It is used to apply a hue rotation on the image.

.myImage {
            filter: hue-rotate(43deg);
        }


x) brightness(%): As the name suggests it is used to adjust the brightness of the image. Where 0% will make the image completely black and 100% is the default and represents the original image.

.myImage {
            filter: brightness(53%);
        }


Using Filter Properties

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Filter in CSS </title>
    <style>
        .hue-rotate {
            filter: hue-rotate(100deg);
        }

        .img {
            height: 200px;
        }
    </style>
</head>
<body>

    <p> Image with 100deg hue rotation </p>
    <img class="hue-rotate myImage" src="myImage.png" alt="Raju image">
    <p> Image without any filter </p>
    <img src="myImage.png" alt="Raju image">

</body>
</html>

Output:




CSS Filter Property PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad