Search code examples
htmlcssgradient

Gradient alpha fade out effect with CSS 3

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

Solution

  • 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.