Shadow filter is used to create an attenuated shadow in the direction and color specified.The following parameters can be used in this filterParameterDescriptionColorThe color that you want the shadow to be.DirectionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).0 = Top45 = Top right90 = Right135 = Bottom right180 = Bottom225 = Bottom left270 = Left315 = Top leftExampleYou can try to run the following code to implement shadow filter −Live Demo                         Text Example:       CSS Tutorials    

Use the grayscale effect to convert the colors of the object to 256 shaded of gray. The following parameter is used in this filter:ParameterDescriptionGrayConverts the colors of the object to 256 shades of gray.ExampleYou can try to run the following code to set grayscale effect:Live Demo                         Text Example:       CSS Tutorials    

To implement Fade In Up Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeIn {             0% {opacity: 0;}             100% {opacity: 1;}          }          @keyframes fadeIn {             0% {opacity: 0;}             100% {opacity: 1;}          }          .fadeIn {             -webkit-animation-name: fadeIn;             animation-name: fadeIn;          }                           Reload page                function myFunction() {             location.reload();          }          

The flip effect is used to create a mirror image of the object. The following parameters can be used in this filter -ParameterDescriptionFlipHCreates a horizontal mirror imageFlipVCreates a vertical mirror imageExampleYou can try to run the following code to create a mirror imageLive Demo                               Text Example:       CSS Tutorials    

To implement Fade Out Down Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeOutDown {             0% {                opacity: 1;                -webkit-transform: translateY(0);             }             100% {                opacity: 0;                -webkit-transform: translateY(20px);             }          }          @keyframes fadeOutDown {             0% {                opacity: 1;                transform: translateY(0);             }             100% {                opacity: 0;                transform: translateY(20px);             }          }          .fadeOutDown {             -webkit-animation-name: fadeOutDown;             animation-name: fadeOutDown;          }                           Reload page                function myFunction() {             location.reload();          }          

To make any particular color transparent, use Chroma Filter. You can use it with scrollbars also.The following parameter can be used in this filterParameterDescriptionColorThe color that you'd like to be transparent.Implementing the CSS Chroma Filter −Live Demo                         Text Example:       CSS Tutorials    

Use CSS filters to add special effects to text, images and other aspects of a webpage without using images or other graphics. If you are developing your site for multi browsers, then it may not be a good idea to use CSS filters because there is a possibility that it would not give any advantage. Some CSS Filters include  Motion Blur, Chroma Filter, Flip Effect, etc.

The Alpha Channel filter alters the opacity of the object, which makes it blend into the background. The following parameters can be used in this filter −ParameterDescriptionOpacityLevel of the opacity. 0 is fully transparent, 100 is fully opaque.finishopacityLevel of the opacity at the other end of the object.StyleThe shape of the opacity gradient.0 = uniform1 = linear2 = radial3 = rectangularstartXX coordinate for opacity gradient to begin.startYY coordinate for opacity gradient to begin.FinishX coordinate for opacity gradient to end.FinishY coordinate for opacity gradient to end.ExampleYou can try to run the following code to implement Alpha Filter −Live Demo       ... Read More

To import styles from another style, use the @import rule. It should appear right at the start of the style sheet before any of the rules, and its value is a URL.You can write it like this     The significance of the @import rule is that it allows you to develop your style sheets with a modular approach. You can create various style sheets and then include them wherever you need them.

To indicate what character set the style sheet written with CSS, use the @character rule. The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character-sets.ExampleLet us see an example,