What is filter and its properties in CSS?-Programming tutorial

Table of Contents

Filter in CSS

When you develop a website, you generally come under situations where you insert many images on your web page. These images give your website a wonderful look. But, you may be required to adjust the properties of these images as per your wish. These properties may include the values like brightness, contrast, shadow, grayscale, hue, saturation, opacity etc. You can adjust these values by using filter property of CSS3. The filter property provides an easy way to apply the visual effects to the images.

The syntax of filter property is given below:

filter:filter function();

There are various functions of filter property which are shown below:

brightness()
contrast()
blur()
drop-shadow()
grayscale()
hue-rotate()
opacity()
saturate()

brightness() function of CSS filter

The brightness() provides the facility to change the brightness of an image. The 0% brightness means a complete blackness and 100% brightness leaves an image unchanged. The brightness more than 100% will make an image brighter than its normal brightness. Let us write a code to explain the concept of brightness filter in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:10px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            border:1px solid red;
            filter:brightness(50%);
        }
        #image2{
            border:1px solid red;
            filter:brightness(100%);
        }
        #image3{
            border:1px solid red;
            filter:brightness(200%);
        }
    </style>
</head>
<body>
<h3>Brightness setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

brightness() function of CSS filter, www.programmingtutorial.in — Image1 with brightness (50%), Image2 with brightness (100%), Image3 with brightness (200%)

contrast() function of CSS filter

The contrast() function provides the facility to change the contrast of an image. The 0% contrast means a complete blackness and 100% contrast leaves an image unchanged. The contrast more than 100% will make an image with more contrast than its normal contrast. Let us write a code to explain the concept of contrast filter in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:10px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            border:1px solid red;
            filter:contrast(30%);
        }
        #image2{
            border:1px solid red;
            filter:contrast(100%);
        }
        #image3{
            border:1px solid red;
            filter:contrast(300%);
        }
    </style>
</head>
<body>
<h3>Contrast setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

contrast() function of CSS filter, www.programmingtutorial.in — contrast filter

blur() function of CSS filter

CSS3 provides a function namely blur() function which makes an image to look more blur or less blur as per the value you have given. The more value means more blur of an image. If no value is provided then, 0 value is used. The value is in pixels.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:10px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            border:1px solid red;
            filter:blur(0px);
        }
        #image2{
            border:1px solid red;
            filter:blur(1px);
        }
        #image3{
            border:1px solid red;
            filter:blur(2px);
        }
    </style>
</head>
<body>
<h3>blur setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

blur() function of CSS filter, www.programmingtutorial.in — blur filter

drop-shadow() function of CSS filter

You can apply shadow to an image by using drop-shadow value of filter property in CSS. This value works in a similar fashion as box-shadow works. There are different drop shadows like v-shadow, h-shadow, blur etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:20px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            filter:drop-shadow(2px 4px 6px rgb(155, 59, 59));
        }
        #image2{
            filter:drop-shadow(4px 6px 8px rgb(59, 180, 86));
        }
        #image3{
            filter:drop-shadow(6px 8px 10px rgb(121, 43, 173));
        }
    </style>
</head>
<body>
<h3>blur setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

drop-shadow() function of CSS filter, www.programmingtutorial.in — drop-shadow filter

grayscale() function of CSS filter

This function applies to make the image looking greyish. The 0% value means no change in original image and 100% value means complete grey look. You can apply any value between 0 and 100 in percentage. You cannot apply a negative value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:20px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            filter:grayscale(0%);
        }
        #image2{
            filter:grayscale(50%);
        }
        #image3{
            filter:grayscale(100%);
        }
    </style>
</head>
<body>
<h3>grayscale setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

grayscale() function of CSS filter, www.programmingtutorial.in — grayscale filter

hue-rotate() function of CSS filter

The hue-rotate function applies a hue rotation on an image. The value should be given in degree. The 0 deg means no change and 360 deg is the maximum value which means you should use a value between 0 deg and 360 deg. If you use value more than 360 deg then, it will work in the same fashion as it works for 0 deg to 360 deg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:20px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            filter:hue-rotate(0deg);
        }
        #image2{
            filter:hue-rotate(150deg);
        }
        #image3{
            filter:hue-rotate(270deg);
        }
    </style>
</head>
<body>
<h3>hue-rotate setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>

hue-rotate() function of CSS filter, www.programmingtutorial.in — hue-rotate, www.programmingtutorial.in

opacity() function of CSS filter

The opacity() function helps in setting transparency of an image. The value 0% means a complete transparent image and a value 100% leaves an image unchanged. Therefore, you can set value between 0% and 100%. This function is similar to opacity property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter property</title>
    <style>
        .container{
            display:flex;
        }
        .image{
            margin:20px;           
        }
        img{
            height:200px;
            width:200px;
        }
        #image1{
            filter:opacity(100%);
        }
        #image2{
            filter:opacity(50%);
        }
        #image3{
            filter:opacity(20%);
        }
    </style>
</head>
<body>
<h3>opacity setting with filter</h3>
<div class="container">
<div class="image" id="image1"><img src="filter1.jpg"></div>
<div class="image" id="image2"><img src="filter2.jpg"></div>
<div class="image" id="image3"><img src="filter3.jpg"></div>
</div>
</body>
</html>