Fade the opacity of a `` as its goes down the page - CSS3

Question

Ive got a <ul> that I want to fade out as it goes down the page. Ive been experimenting with linear-gradient but couldnt get it to work. Is it even possible ?

Ive made a JSFiddle example here : http://jsfiddle.net/trpa9qfr/1/

Im trying to get the text to be faded as its gets further down the page.. ie. the word "SIX" would be barley visable, FIVE would be slightly more visable, FOUR would be slightly less visable that THREE... etc

Another way to do this would be to target each <li> and give it its own opacity but id like the opacity to gradient throughout the word ie. the bottom of the word SIX would be less visable than the top of the word SIX.

It could also be done by placing a div above the but this wouldnt allow the to be clickable and there is an image background on this page so the div would effect the look of this..

Answer 1

Try this

    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgba(0,0,0,0.0)), /* Top */
        color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
    );

    background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
    );