Gradient alpha fade out effect with CSS 3

Question

I would like to know if it would be possible to replicate the effect like the bottom of the Top Tweets list with pure CSS?

http:///www.twitter.com

Answer 1

Yes you can! Taking advantage of RGBa colors and CSS3 gradients, we can apply the following styles to an element and have a fading semi-transparent background:

-moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1))
-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0), to(rgba(255,255,255,1));

Sadly, this only works in Firefox 3.6+, Safari, and Chrome. If you need the effect in IE or older versions of Firefox, then you'd be better off using the semi-transparent PNG like Twitter does.

Answer 2

here's a tool to generate the syntax of any css3 color gradient you need.