How to set a (nice) linear-gradient from any color to transparent?

Question

I'm trying to set a linear-gradient on a div from red to transparent, but the output is a bit strange: fiddle.

Fiddle's css:

background: -webkit-linear-gradient(transparent, red);
background:    -moz-linear-gradient(transparent, red);
background:     -ms-linear-gradient(transparent, red);
background:      -o-linear-gradient(transparent, red);
background:         linear-gradient(transparent, red);

As you can see, the transition between the two colors is in gray, while I expected only a red gradation.

Does anybody know how to improve this output (without replacing "transparent" by "yellow" in the fiddle)?

PS: tried in Chrome 23.0.1271.64

Answer 1

try changing transparent into rgba(255,0,0, 0)

example fiddle: http://jsfiddle.net/9MpNM/

Answer 2

I have just modified your jsfiddle

Check if like you want

background: -webkit-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:    -moz-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:     -ms-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:      -o-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:         linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);