Google News
logo
CSS3 Filters
The CSS3 filter effects provide an easy way to apply the visual effect to the images. The CSS3 filter properties are:

1. blur()  : Blur effect can be applied to an element using the blur() function.

2. brightness()  : The brightness() function can be used to set the brightness of an image. 

3. contrast()  :  The contrast() function is used to adjust the contrast on an image. 

4. drop-shadow()  :  The drop-shadow() function to apply the drop shadow effect to the images like Photoshop. 

5. grayscale()  : The images can be converted to grayscale using the grayscale() function. 

6. hue-rotate() : The hue-rotate() function applies a hue rotation on the image. 

7. invert() : The invert effect like Photoshop can be applied to an image with the invert() function.

8. opacity() : The opacity() function can be used to apply transparency to the images. 

9. sepia() : The sepia() function converts the image to sepia. A value of 100% or 1 is completely sepia. 

10. saturate() : The saturate() function can be used to adjust the saturaion of an image.

Blur Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Blur Filter</title>

<style type="text/css">
img.blur { 
-webkit-filter: blur(2px); 
filter: blur(2px); 
border-radius:100px; 
}
img.extra-blur { 
-webkit-filter: blur(5px);   
filter: blur(5px); 
border-radius:100px; 
}
table td{ 
padding: 10px; 
text-align: center; 
}
</style>

</head>
<body>

    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="blur" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="extra-blur" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>

</body>
</html>
Output :
Parrot Parrot Parrot
Brightness Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Brightness Filter</title>

<style type="text/css">

.img_bright { 
-webkit-filter: brightness(200%);  
filter: brightness(200%);
 border-radius:100px;
}
.img_dark { 
-webkit-filter: brightness(50%);  
filter: brightness(50%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }

</style>

</head>
<body>

    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_bright" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_dark" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>

</body>
</html>   
Output :
Parrot Parrot Parrot
Contrast Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Contrast Filter</title>

<style type="text/css">

.img_contrast {  
-webkit-filter: contrast(200%); 
filter: contrast(200%); 
border-radius:100px;}
.img_contrast_dim{ -webkit-filter: contrast(50%);  
filter: contrast(50%); border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }

</style>

</head>
<body>
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_contrast" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_contrast_dim" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
</body>
</html>   
Output :
Parrot Parrot Parrot
Drop-Shadow Filter
	
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Drop Shadow Filter</title>
 
<style type="text/css">
 
.img_drop_shadow {  
-webkit-filter: drop-shadow(2px 2px 4px #666); 
filter: drop-shadow(2px 2px 4px #666);
border-radius:100px;
}
.img_drop_shadow_large { 
-webkit-filter: drop-shadow(4px 4px 10px #666); 
filter: drop-shadow(4px 4px 10px #666); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_drop_shadow" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_drop_shadow_large" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>
Output :
Parrot Parrot Parrot
Grayscale Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Grayscale Filter</title>
 
<style type="text/css">
 
.img_complete_gray { 
-webkit-filter: grayscale(100%); 
filter: grayscale(100%); 
border-radius:100px;
}
.img_partial_gray {
-webkit-filter: grayscale(50%);  
filter: grayscale(50%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_complete_gray" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_partial_gray" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>    
Output :
Parrot Parrot Parrot
Hue Rotation Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Hue Rotatation Filter</title>
 
<style type="text/css">
 
.img_hue_normal {  
-webkit-filter: hue-rotate(150deg); 
filter: hue-rotate(150deg); 
border-radius:100px;
}
.img_hue_wrap { 
-webkit-filter: hue-rotate(480deg);  
filter: hue-rotate(480deg);
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_hue_normal" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_hue_wrap" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>   ​
 
Output :
Parrot Parrot Parrot
Invert Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Invert Filter</title>
 
<style type="text/css">
 
.img_partially_inverted { 
-webkit-filter: invert(80%);   
filter: invert(80%); 
border-radius:100px;
}
.img_fully_inverted { 
-webkit-filter: invert(100%);  
filter: invert(100%); 
border-radius:100px;
}
 
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_partially_inverted" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_fully_inverted" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>  
Output :
Parrot Parrot Parrot
Opacity Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Opacity Filter</title>
 
<style type="text/css">
 
.img_opacity { 
-webkit-filter: opacity(80%);
 filter: opacity(80%); 
border-radius:100px;
}
.img_opacity_1{ 
-webkit-filter: opacity(30%); 
filter: opacity(30%);
border-radius:100px;
}
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_opacity" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_opacity_1" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html> 
Output :
Parrot Parrot Parrot
Sepia Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Sepia Filter</title>
 
<style type="text/css">
 
.img_complete_sepia { 
-webkit-filter: sepia(100%);  
filter: sepia(100%); 
border-radius:100px;
}
.img_partial_sepia { 
-webkit-filter: sepia(30%); 
filter: sepia(30%); 
border-radius:100px;
}
table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_complete_sepia" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_partial_sepia" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>   
Output :
Parrot Parrot Parrot
Saturated Filter
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 Saturated Filter</title>
 
<style type="text/css">
 
.img_un_saturated { 
-webkit-filter: saturate(0%); 
filter: saturate(0%); 
border-radius:100px; 
}
.img_super_saturated { 
-webkit-filter: saturate(200%); 
filter: saturate(200%); 
border-radius:100px; 
}
 
 table td{ padding: 10px; text-align: center; }
 
</style>
</head>
<body>
 
    <table>
        <tr>
            <td>
                <img src="images/birds.jpg" alt="Parrot" style="border-radius:100px;">
            </td>
            <td>
                <img class="img_un_saturated" src="images/birds.jpg" alt="Parrot">
            </td>
            <td>
                <img class="img_super_saturated" src="images/birds.jpg" alt="Parrot">
            </td>
        </tr>
    </table>
    
</body>
</html>  
Output :
Parrot Parrot Parrot