What is css filter property

CSS filter is a visual effects as in photoshop. In CSS filter have many type filter method as: none, blur(3px), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), url(). All method can be use for the image effect. Some method we can not use for the text content.

 blur(px): blur effect you can apply an image or text content. blur effect has zero value in the default. when you want extra blur then increase your value.

 brightness(%): you can increase and decrease brightness of the image. It's valued starting from 0% to 100%. If you will fill value 0% then the image shows black and if you will use 100% then it will be showing original image brightness. If you want to show your original image then fill value 1. when required more brightness then need 100% ++ as like brightness(150%), brightness(220%) Or as you wish to fill and check.

 contrast(%): It's working as brightness values.

 drop-shadow(horizontal-shadow vertical-shadow blur spread color): You can apply shadow effect images or content. It's work as CSS box-shadow and text-shadow at text content. "spread" value not supported now at this time.

 grayscale(%): where we required black and white image then we use this effect.

 hue-rotate(deg): this filter applies at the image for the rotation a hue.

 opacity(%): this filter work as CSS opacity property.

 What is the default value of the CSS filter?
 The default value for the CSS filter is none method. None method not required parentheses ().

 How to add filter effect at the text?
 You can add filter effect as using in the images both is same but some method working with content boxes as:none, blur(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity().

Demo code

<style>

        .anythingCSSFilter{

            border:5px solid #0bf;

            background: #eee;

            display: inline-block;

            padding: 20px;

        }

        .blurText{

            -webkit-filter: blur(4px);/* this is the for Safari 6.0 - 9.0 */

            filter:blur(4px);

        }

        .anythingCSSText{

            background: #0b6;

            color: #fff;

            display: inline-block;

            padding: 20px;

            border:5px solid #0b6;

        }

        .withGrascale{

            -webkit-filter: grayscale(90%); filter: grayscale(90%);

        }

        .cssOriginal{ display: inline-block; margin: 20px 10px;}

        .cssBlurFilter{  -webkit-filter: blur(5px); filter: blur(5px); }

        .cssGrayScaleFilter{  -webkit-filter: grayscale(90%); filter: grayscale(90%); }

        .cssDropShadowFilter{  -webkit-filter: drop-shadow(10px 10px 20px #0bf); filter: drop-shadow(10px 10px 20px #0bf); }

        .cssBrightnesFilter{  -webkit-filter: brightness(250%); filter: brightness(250%); }

        h4{ margin: 0; padding: 0; font-size: 24px;}

    </style>

<h4>Some blured content using css filter blur(4px) effect.</h4>

    <div class="anythingCSSFilter">

        original content for the blur text box.

    </div>

    <div class="anythingCSSFilter blurText">

        css filter blur() used here.

    </div>

    <h4>Using css filter grayscale(90%) effect.</h4>

    <div class="anythingCSSText">

        original content.

    </div>

    <div class="anythingCSSText withGrascale">

           used grayscale filer content.

        </div>

    <h4>Some example for the css filter property.</h4>

    <div class="cssOriginal">

        <img src="images/myRose.jpg" alt="CSS Filter">

    </div>

    <div class="cssOriginal cssBlurFilter">

        <img src="images/myRose.jpg" alt="CSS Filter">

    </div>

    <div class="cssOriginal cssGrayScaleFilter">

        <img src="images/myRose.jpg" alt="CSS Filter">

    </div>

    <div class="cssOriginal cssDropShadowFilter">

        <img src="images/myRose.jpg" alt="CSS Filter">

    </div>

    <div class="cssOriginal cssBrightnesFilter">

        <img src="images/myRose.jpg" alt="CSS Filter">

    </div>