Everything about css filter property

CSS filter property

Filter means different effects on image.
We use filter on images and according to the filter value we can see various image effects.
We can put value in pixel, percentage, etc.
Values of filter:
filter:blur(values in pixel);

filter:brightness(values in percent);

filter:contrast(values in percent);

filter:drop-shadow(horizontal_shadow vertical_shadow blur color);

filter:grayscale(values in percent);

filter:hue-rotate(any single value between 0deg-360deg);

filter:invert(values in percentage);

filter:opacity(values in percent);

filter:saturate(values in percent);

filter:sepia(values in pixel,percent etc);

filter:none

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    .A{
        height:150px;
        width:150px;
        filter:blur(15px);
    }
    .B{
        height:150px;
        width:150px;
        filter:brightness(200%);
    }
    .C{
        height:150px;
        width:150px;
        filter:contrast(25%);
    }
    .D{
        height:150px;
        width:150px;
        filter:drop-shadow(8px 10px 9px gray);
    }
    .AA{
        height:150px;
        width:150px;
        filter:grayscale(20%);
    }
    .BB{
        height:150px;
        width:150px;
        filter:hue-rotate(120deg);
    }
    .CC{
        height:150px;
        width:150px;
        filter:invert(70%);
    }
    .DD{
        height:150px;
        width:150px;
        filter:opacity(70%);
    }
    .AAA{
        height:150px;
        width:150px;
        filter:saturate(200%);
    }
    .BBB{
        height:150px;
        width:150px;
        filter:sepia(70%);
    }
    .DDD{
        height:150px;
        width:150px;
        filter:none;
    }
</style>
</head>
<body>

<img src="pic_1.jpg" class="A">
<img src="pic_1.jpg" class="B">
<img src="pic_1.jpg" class="C">
<img src="pic_1.jpg" class="D">

<img src="pic_1.jpg" class="AA">
<img src="pic_1.jpg" class="BB">
<img src="pic_1.jpg" class="CC">
<img src="pic_1.jpg" class="DD">

<img src="pic_1.jpg" class="AAA">
<img src="pic_1.jpg" class="BBB">
<img src="pic_1.jpg" class="DDD">

</body>
</html>

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us