



왼쪽에서 오른쪽 
#linear-gradient {
  background: -webkit-linear-gradient(left, skyblue , white);  /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(right, skyblue , white); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(right, skyblue , white);  /* Firefox 3.6 ~ 15 */
  background: linear-gradient(to right, skyblue , white); /*표준 문법 */
}

대각선
#linear-gradient {
  background: -webkit-linear-gradient(left top, skyblue , white);  /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(bottom right, skyblue , white); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(bottom right, skyblue , white);  /* Firefox 3.6 ~ 15 */
  background: linear-gradient(to bottom right, skyblue , white); /*표준 문법 */
} 

각도 설정, 여러가지 색상 설정, 투명도 설정은 같음
#linear-gradient {
  background: -webkit-linear-gradient(180deg, skyblue , white);  /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(180deg, skyblue , white); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(180deg, skyblue , white);  /* Firefox 3.6 ~ 15 */
  background: linear-gradient(180deg, skyblue , white); /*표준 문법 */
} 

#linear-gradient {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));  /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));  /* Firefox 3.6 ~ 15 */
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*표준 문법 */