CSS3 White to Transparent Gradient - css

Question

I'm using CSS3 and RGBA to create a white-to-transparent gradient:
div {
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
padding: 2rem 0;
}
Fiddle here: http://jsfiddle.net/alecrust/fYz45/
However as you'll notice, the gradient is dark in the middle. I'm getting this:
And I'm expecting this:
How can I rectify?

Answer 1

Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:
http://jsfiddle.net/fYz45/6/

Answer 2

The final color should be white, transparent, and not black transparent
instead of
rgba(0, 0, 0, 0)
end in
rgba (255, 255, 255, 0)

Answer 3

If anyone else if having trouble with gradients or getting a certain aspect (angles, transparency, etc.) I recommend trying this tool to learn more: http://www.colorzilla.com/gradient-editor/ The code below is a sample of what it can do. Transparency is controlled by the top squares, color on the lowers. It allows you to keep dropping more colors in. It has good backwards comparability as well and also some has presets.
`div {
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1 ); /* IE6-9 */
background-repeat: repeat-x;
padding: 2rem 0;
}`

Answer 4

div{
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff, endColorstr=#ffff01);
background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#ffff01));
}