Left to Right

   	/* mozila code */
background-image: -moz-linear-gradient(left, right,
from(#A1D004), to(#6B9A00));
/* webkit code */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, #A1D004),
color-stop(1.00, #6B9A00));
/* IE code - note GradientType=0 means vertical */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#A1D004, endColorstr=#6B9A00, GradientType=0);

Top to Bottom

 background-image: -moz-linear-gradient(left, right,
from(#A1D004),
to(#6B9A00));
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, #A1D004),
color-stop(1.00, #6B9A00)); /* IE code - note GradientType=1 means horizontal */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#A1D004, endColorstr=#6B9A00, GradientType=1);

Rainbows & Color-stops

 /*  fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);

/*mozilla rainbow gradient*/ background-image: -moz-linear-gradient( left top, right bottom , from(red), color-stop(16%, orange), color-stop(32%, yellow), color-stop(48%, green), color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));

/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
}

30% Width

60% Width

90% Width