(css) 그라데이션 gradation

<style>
    .grad {

        background : blue; /* 그라데이션을 지원하지 않는 브라우저용*/
        background : -webkit-linear-gradient(left top, blue, white);
        background : -moz-linear-gradient(right bottom, blue, white);
        background : -o-linear-gradient(right bottom, blue, white);
        background : linear-gradient(to right bottom, blue, white); /*표준 구문*/

    }
</style>

linear-gradient( <각도> to <방향>, color-step, [color-stop,..]);

방향 키워드

속성 값	설명
to top	아래에서 시작해 위로 그라데이션이 만들어짐
to left	오른쪽에서 시작해 왼 쪽으로
to right	왼쪽에서 시작해 오른쪽으로
to bottom	위에서 시작해 아래로

* 각 브라우저마다 차이가 있을 수 있음.

<각도 조정>

<style>
    .grad {

        background : #ff0000; /*css 미지원 브라우저*/
        background : -webkit-linear-gradient(45deg, #ff0000, #ffffff); /*초기 모던 브라우저*/
        background : -moz-linear-gradient(45deg, #ff0000, #ffffff); /*초기 모던 브라우저*/
        background : -o-linear-gradient(45deg, #ff0000, #ffffff); /*초기 모던 브라우저*/
        background : linear-gradient(45deg, #ff0000, #ffffff); /* 최신 모던 브라우저 */

    }
</style>

<div class="grad"></div>

<색상 중지 점(color-step)>

<style>
   div {
      width:500px;
      height:300px;
   }
   .grad {
      background: #06f; /* css3 미지원 브라우저 */
      background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */
   }
</style>

<div class="grad"></div>

원형 그라데이션

radial-gradient( <최종 모양> <크기> at <위치>, color-step, [color-stop...])

<style>
div {
   width:500px;
   height:300px;
   margin:10px;
}
.grad1{
   background:red;
   background:-webkit-radial-gradient(white, yellow, red);
   background:-moz-radial-gradient(white, yellow, red);
   background:-o-radial-gradient(white, yellow, red);
   background:radial-gradient(white, yellow, red);
}
.grad2{
   background:red;
   background:-webkit-radial-gradient(circle, white, yellow, red);
   background:-moz-radial-gradient(circle, white, yellow, red);
   background:-o-radial-gradient(circle, white, yellow, red);
   background:radial-gradient(circle, white, yellow, red);
}
</style>

<div class="grad1"></div>
<div class="grad2"></div>

원형 그라데이션 위치 조정

.grad {
   background: blue;
   background: -webkit-radial-gradient(10% 10%, circle, white,blue);
   background: -moz-radial-gradient(10% 10%, circle,white,blue);
   background: -o-radial-gradient(10% 10%, circle, white,blue);
   background: radial-gradient(circle at 10% 10%,white,blue);
}

원형 그라데이션 크기 조정

#div1{
background:darkgreen;
background:-webkit-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:-moz-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:-o-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
  }
  #div2{
background:darkgreen;
 background:-webkit-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
background:-moz-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
background:-o-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
background:radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);
  }
  #div3{
background:darkgreen;
   background:-webkit-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
background:-moz-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
background:-o-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
background:radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);
  }
  #div4{
background:darkgreen;
   background:-webkit-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
background:-moz-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
background:-o-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
background:radial-gradient(circle v-corner at 30% 40%, white, yellow, green);

원형 그라데이션의 색상 중지 점(color-stop)

div {
   width:500px;
   height:300px;
   margin:10px;
}
   .grad1{
   background:skyblue;
  background:-webkit-radial-gradient(red, yellow, skyblue);
   background:-moz-radial-gradient(red, yellow, skyblue);
   background:-o-radial-gradient(red, yellow, skyblue);
   background:radial-gradient(red, yellow,skyblue);
   }
   .grad2{
   background:skyblue;
    background:-webkit-radial-gradient(red, yellow 20%, skyblue);
   background:-moz-radial-gradient(red, yellow 20%, skyblue);
   background:-o-radial-gradient(red, yellow 20%, skyblue);
   background:radial-gradient(red, yellow 20%, skyblue);
   }

<div class="grad1"></div>
<div class="grad2"></div>

그라데이션 반복

.grad1 {
   background: red; /* css3 미지원 브라우저 */
   background: -webkit-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
   background: -moz-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
   background: -o-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
   background: repeating-linear-gradient(yellow, red 20px); /* 최신 모던 브라우저 */
}

그라데이션 반복을 통한 '두개 이상의 색상 패턴만들기(그라데이션이 아님)

.grad2 {
   background: red; /* css3 미지원 브라우저 */
   background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
   background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
   background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 초기 모던 브라우저 */
   background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); /* 최신 모던 브라우저 */
}

출처 - Doit! HTML5 + CSS3 웹 표준의 정석