CSS3 and the 'transparent' value

This is an old one, but worth reminding you peeps, especially now that we're using CSS3 gradients everywhere.

The "transparent" value, CSS-wise, isn't actually transparent as you might actually want it to be. It's transparent black, not transparent white, which means that any other color fading to transparent, will be tinted with black and not white.

Here's a JS Fiddle showing what I mean: http://jsfiddle.net/TVw3L/

To overcome this, you need to use transparent white.

So instead of:

background-image: linear-gradient(left, #fff, transparent);

You should (if you need it) use instead:

background-image: linear-gradient(left, #fff, rgba(255,255,255,0));