This example illustrates the effects of passing different values
to the available CSS filter functions.

Choose a function blur( 1mm ) blur( 1pc ) blur( 1pt ) blur( 1px ) blur( 1em ) blur( 1ex ) brightness( 0.5 ) brightness( 1 ) brightness( 1.5 ) brightness( 30% ) brightness( 60% ) brightness( 120% ) contrast( 25% ) contrast( 0.5 ) contrast( 75% ) contrast( 1.5 ) contrast( 175% ) drop-Shadow( 8px 8px 4px dimgray ) drop-Shadow( -8px 8px 4px dimgray ) drop-Shadow( 8px -8px 4px dimgray ) drop-Shadow( -8px -8px 4px dimgray ) grayscale( 0.5 ) grayscale( 75% ) grayscale( 1 ) grayscale( 125% ) hue-rotate( 45deg ) hue-rotate( -45deg ) hue-rotate( 90deg ) hue-rotate( -90deg ) hue-rotate( 180deg ) hue-rotate( -180deg ) invert( 0.25 ) invert( 0.75 ) invert( 30% ) invert( 60% ) invert( 100% ) opacity( 0 ) opacity( 0.25 ) opacity( 0.5 ) opacity( 1.5 ) saturate( 0 ) saturate( 0.25 ) saturate( 75% ) saturate( 1.5 ) saturate( 200% ) saturate( 3.5 ) sepia( 0 ) sepia( 0.5 ) sepia( 75% ) sepia( 100% )

Please wait for the image to revert to its inital state before applying another choice.