CSS - 선형 그라디언트

그라디언트는 적어도 두 가지 이상의 색상을 이용해 배경색을 지정할 수 있습니다. 형식은 다음과 같습니다.

// 색상으로 그라디언트합니다.
linear-gradient(color-stop1, color-stop2, ...);

// 각도로 그라디언트합니다.
linear-gradient(deg, color-stop1, color-stop2, ...);

prefix 를 사용하려면 아래 형식으로 작성합니다.

-prefix-linear-gradient(color-stop1, color-stop2, ...);

-prefix-linear-gradient(deg, color-stop1, color-stop2, ...);

아래 방법은 IOS4.3 이하, 안드로이드 3.x 이하인 기기에만 해당되며, -webkit- 구문만 사용할 수 있습니다. 단, 안드로이드 4.3에는 -webkit- 이 필요합니다.

-webkit-gradient(kind, 시작점, 끝점, 시작점 색상, 
      칼라 스톱, ..., 끝점 색상);

속 성	설 명
linear-gradient(deg,color-stop1,color-stop2,…);	선형 그라디언트를 지정. 적어도 두 개 이상의 색상을 지정해야 합니다. deg: 방향, 각도.   to bottom| to top | to right| to left | deg 기본값: 위에서 아래로 color-stop1: 색상 color-stop2: 색상
-prefix-linear-gradient(deg,color-stop1,color-stop2,…);	프리픽스가 붙는 선형 그라디언트 지정 적어도 두 개 이상의 색상을 지정해야 합니다. deg: 방향, 각도   top | bottom | left | right | deg color-stop1: 색상 color-stop2: 색상
-webkit-gradient(kind, 시작점, 끝점, 시작점 색상, 칼라 스톱, ..., 끝점 색상);	IOS4.3 이하, 안드로이드 3.x 이하만 해당 kind: linear | radial 중 하나 시작점: <가로 세로> 형식   <left | center | right> <top, center, bottom> 끝점: <가로 세로> 형식   <left | center | right> <top, center, bottom> 시작 색상: from(색상) 칼라 스톱: color-stop(위치 색상) 끝점 색상: to(색상)

deg 각도

각도를 이용해 그라디언트할 경우 표준(W3C)의 0도는 아래에 있기 때문에 밑에서 위로 그라디언트하며, 회전방향은 시계방향입니다.

프리픽스는 0도가 왼쪽에 있고, 왼쪽에서 오른쪽 방향으로 그라디언트합니다. 회전방향은 표준과는 반대로 시계반대방향입니다.

여기서 음수가 올 수 있으며 음수를 지정하면 반대 방향으로 회전합니다.

예를 들어 상단, 왼쪽 모서리가 기준이 되려면 표준(W3C)의 각도가 135deg(혹은 -225deg) 이고, 프리픽스는 315deg(혹은 -45deg) 가 됩니다.

background: linear-gradient(135deg, #fff, #111);

background: -webkit-linear-gradient(315deg, #fff, #111);

color-stop

칼라 스톱은 하나의 축과 두 개 이상의 색상 정지점을 지정할 수 있습니다. 보통은 시작점과 끝점을 지정하는데, 그 사이에 정지점을 다수 추가하여 다양한 색의 전환을 그리는 그라디언트를 만들 수 있습니다.

위치는 %로 지정하지만 따로 정하지 않으면 이전 정지점과 다음 정지점 사이 중간 지점에 위치하게 됩니다.

색의 정지점은 오름차순이어야 합니다. 이전 정지점보다 퍼센트가 작으면 이전 정지점의 위치가 재설정되어 경계선을 그리게 됩니다.

다음은 동일한 결과입니다.

linear-gradient(red, orange, yellow, green, blue); 
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

10% 지점까지가 완전한 빨강, 10%~90% 까지가 전환 지점이고, 그리고 마지막 10%가 완전한 파랑입니다. 여기서 빨강과 파랑의 중간 지점은 30% 지점이 됩니다.

<style>
#gradient {
  background: linear-gradient(red 10%, 30%, blue 90%);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

아래는 이전 정지점보다 앞이어서 경계선을 그리고 있는데, 30% 지점 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환됩니다. 그리고 나머지 35%가 완전한 파랑입니다.

<style>
#gradient {
  background: linear-gradient(red 40%, yellow 30%, blue 65%);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

<style>
#gradient {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}
</style>

<div id="gradient" style="width:100px; height:100px"></div>

반복 그라디언트

repeating-linear-gradient 를 이용하면 반복적인 그라디언트를 그릴 수 있습니다.

<style>
#gradient {
  background: repeating-linear-gradient(red,yellow 10%,blue 20%);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>

다음은 대각선으로 반복 그라디언트를 그립니다.

<style>
#gradient {
  background: repeating-linear-gradient(45deg,red,yellow 10%,blue 20%);
}
</style>

<div id="gradient" style="width:300px; height:100px"></div>