Hue-rotate

This one sample of filter effects applies hue-rotation to all colors of the image. The default value is 0deg and that's the original image. In our example, we have 70deg and 250deg of hue-rotation in the image below.

Invert

This one sample of filter effects inverts all the colors in the image. If your value is 0% it will not effect to the original image while if you have 100% it will completely invert the image. In our example, we have 70% and 90% of invert in the image below.

Blur

This one sample of filter effects applies a blur to the image. This filter effect it determines how many pixels on the image blend into each other. If the value is large it will more blur to the image. In our example, we have 1px and 5px of blur in the image below.

Opacity

This one sample of filter effects applies an opacity to the image to make it semi-transparent. If the value is 100% the image will become opaque, if the value is 0% it will become fully transparent. In our example, we have 40% and 80% of opacity in the image below.

Drop Shadow

This one sample of filter effects adds drop shadow effect to images. This kind of property it required to have an X and the Y offset as well as the color of the drop shadow. In our example, we have 40% and 80% of opacity in the image below.

Source code for the filter effect of a drop shadow in the image above.

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.