CSS3 White to Transparent Gradient

Question

I\'m using CSS3 and RGBA to create a white-to-transparent gradient:

div {
    background-image: -moz-linear-gradient(         


        

Answer 1

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));
}

Answer 2

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 3

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 4

Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:

http://jsfiddle.net/fYz45/6/