CSS3 그라디언트 

그래디언트 방향을보다 잘 제어하려면 미리 정의 된 방향 (아래에서 위쪽, 오른쪽에서 왼쪽, 오른쪽 아래 등) 대신 각도를 정의 할 수 있습니다.

통사론

background: linear-gradient(angle, color-stop1, color-stop2);

각도는 수평선과 그라데이션 선 사이의 각도로 지정됩니다.

다음 예제는 선형 그래디언트에서 각도를 사용하는 방법을 보여줍니다.

#grad {

  background: red; /* For browsers that do not support gradients */

  background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */

  background: linear-gradient(-90deg, red, yellow); /* Standard syntax */

}

여러 색상 정지 기능 사용

다음 예제에서는 여러 색상 정지가있는 선형 그라데이션 (위에서 아래로)을 보여줍니다.

예

#grad {

  background: red; /* For browsers that do not support gradients */

  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */

  background: linear-gradient(red, yellow, green); /* Standard syntax */

}

다음 예제에서는 무지개 색상과 일부 텍스트의 선형 그래디언트 (왼쪽에서 오른쪽으로)를 만드는 방법을 보여줍니다. 

그라디언트 배경

예

#grad {

  background: red; /* For browsers that do not support gradients */

  /* For Safari 5.1 to 6.0 */

  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  /* For Opera 11.1 to 12.0 */

  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  /* For Fx 3.6 to 15 */

  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  /* Standard syntax */

  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 

}