CSS Gradients: Creating Horizontal and Vertical Color Transitions

1. Horizontal Gradient (Left to Right):

background: #74F195;
background: -webkit-linear-gradient(left, #74F195, #C8FF9A);
background: -o-linear-gradient(right, #74F195, #C8FF9A);
background: -moz-linear-gradient(right, #74F195, #C8FF9A);
background: linear-gradient(to right, #74F195, #C8FF9A);

2. Vertical Gradient (Top to Bottom):

background: -moz-linear-gradient(top, #4B8C5C 0%, #75945E 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a09d), color-stop(100%, #008985));
background: -webkit-linear-gradient(top, #00a09d 0%, #008985 100%);
background: -o-linear-gradient(top, #00a09d 0%, #008985 100%);
background: -ms-linear-gradient(top, #00a09d 0%, #008985 100%);

Original source: CSS Gradients: Left to Right, Top to Bottom. All rights reserved by the original author.