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:

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

Webkit:

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

(Updated after changes to Webkit gradients)

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

Although this is not an all-around sollution, it works on Safari/Webkit - so it's nice to know for someone who does mobile apps.

So, suppose you only address webkit, you've got this nice feature described here.

-webkit-mask-image: -webkit-gradient(...)

This also helps you when you can't fake the fade-out with some overlaid element. (for example, having an image on the background, instead of a solid color)

For the rest, go with the above.

Answer 3

If you want to use more up to date direction syntax for the gradient use to bottom, as in

background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));