Using CSS Filters we can apply some crazy awesome visual effects to almost any DOM element like image , video , body , etc. In this demo we'll go through all the 10 functions that the filter property supports -

blur - Value of the blur radius is a CSS length (like you use in box or text shadow) but does not accept percentage values.

brightness - Value can be 0-1 or 0%-100%

contrast - Value of 0% creates a black image. Value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.

drop-shadow - It's like our very own box-shadow (accepts arguments similarly without the commas and inset keyword is not allowed). But then what's the difference between box-shadow vs filter: drop-shadow ? If you ever wanted your box-shadow to take the transparent parts of an image into account and apply outer shadows there, then this function is for you!

grayscale - Value can be 0-1 or 0%-100%

hue-rotate - 0-360 degrees

invert - Value can be 0-1 or 0%-100%

saturate - Value of 0% is completely un-saturated. Value of 100% leaves the input unchanged. Other values multiples the effect linearly. Values over 100% are allowed, providing super-saturated results.

sepia - Value can be 0-1 or 0%-100%

opacity - Value of 100% or 1 is opaque. 0% or 0 is transparent. Values between 0% and 100% or 0 and 1 are linear multipliers on the effect. Default is 100%.

You can quickly read the spec for a complete description on each function.

Consider this demo as a filter effects chart or cheatsheet or just a quick way to brush up. Ofcourse you can extend such examples to do more on your ever-awesome sites like implementing neat and simple hover effects on image galleries for portfolios or something else. Who knows!

Note - Currently CSS Filters are only supported in Webkit based browsers. Stay tuned to caniuse.

Related: