About CSS3 Filter Functions

Posted By : Vikas Pundir | 19-Mar-2018


In this Blog we'll introduce some filter effects of CSS3 like a blur effect, balancing brightness or contrast effect, color saturation effect etc. you can perform these all visual effect operations on images and other graphical elements onto the web page. Using the CSS3 filter property you can apply filter effects on the element, in the order provided accept one or more filter function.

The CSS3 Filter Blur Effect:
In Photoshop we use some blur effect like Gaussian blur effect directly on an image, But now we can be applied CSS3 Filter Blur Effect to an element using the blur() function. For defines the blur radius this function accepts CSS length value as the parameter. Create more blur effect on an element we will define a large value. If the value 0 is used so it means no parameter is provided.

HTML Code For Filter Effects:

<body>
    <table>
        <tr>
            <td>
                <img src="/examples/images/img.jpg">
            </td>
            <td>
                <img class="blur" src="/examples/images/img.jpg">
            </td>
            <td>
                <img class="extra-blur" src="/examples/images/img.jpg">
            </td>
        </tr>
        
    </table>
</body>

CSS Code:

img.blur {
    -webkit-filter: blur(2px); 
    filter: blur(2px);
}
img.extra-blur {
    -webkit-filter: blur(5px); 
    filter: blur(5px);
}

table td{
    padding: 10px;
    text-align: center;
}

Setting the Image Brightness:
To set the brightness of an image we can be used the brightness() function. We set the value of 0% to create an image will be completely black. 
For better results in the brighter image, we can also set the brightness higher than the 100%. A value of 1 is used, If the amount parameter is missing. In Brightness effect negative values are not allowed.

CSS Code:

img.bright {
    -webkit-filter: brightness(200%); 
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); 
    filter: brightness(50%);
}

Adjusting the Image Contrast:
Adjust the contrast on an image the contrast() function is used. Here also if the value is 0% so the image will show black. For results with fewer contrast values over 100% are also allowed. A value of 1 is used, If the amount parameter is missing.

CSS Code:

img.bright {
    -webkit-filter: contrast(200%); 
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); 
    filter: contrast(50%);
}

Adding Drop Shadow to Images:
For drop shadow effect on an image, you can use the drop-shadow() function like Photoshop. The box-shadow property is similar to this function.

CSS Code:

img.shadow {
    -webkit-filter: drop-shadow(2px 2px 4px orange); 
    filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
    -webkit-filter: drop-shadow(4px 4px 10px orange); 
    filter: drop-shadow(4px 4px 10px orange);
}

Converting an Image to Grayscale:
Using the grayscale() function you can be converted images into grayscale. If the value is 100% so the image will completely grayscale. Leaves the image unchanged on the value of 0%. A value of 0 is used, If the amount parameter is missing.

CSS Code:

img.complete-gray {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); 
    filter: grayscale(50%);
}
 
 
 
 
 
 

 
 
 
 
 

About Author

Author Image
Vikas Pundir

Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.

Request for Proposal

Name is required

Comment is required

Sending message..