Gradient alpha fade out effect with CSS 3

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.

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.