CSS로 선형 그라디언트 구현하기

이 포스트에서는 CSS로 선형 그라디언트를 구현하는 방법을 설명합니다.

예전에는 배경색을 단색으로밖에 지정할 수 없어서 그라디언트를 구현하려면 이미지를 이용해야만 했습니다. 하지만 CSS3에서 그라디언트 기능이 추가되면서 그라디언트는 이미지 없이 구현할 수도 있게 되었습니다.

우선, 그라디언트를 구현하려면 다음과 같은 CSS를 사용합니다.

selector {
	background: #55aaff;
	background: -webkit-linear-gradient(#55ffff, #5555ff);
	background:    -moz-linear-gradient(#55ffff, #5555ff);
	background:      -o-linear-gradient(#55ffff, #5555ff);
	background:         linear-gradient(#55ffff, #5555ff);
}

먼저 2번 줄에서는 그라디언트를 지원하지 않을 경우 대신 표시될 배경색을 지정합니다. 그리고 3번 줄에서는 사파리 5.1부터 6.0까지의 버전에서 표시하기 위하여 -webkit- 접두어를 쓰고, 4번 줄에서는 파이어폭스 3.6부터 15 버전까지를 위하여 -moz- 접두어를, 5번 줄에서는 오페라 11.1부터 12.0 버전까지를 위하여 -o- 접두어를 씁니다. 6번 줄에서는 표준적인 형식으로 접두어 없이 그냥 씁니다. 인터넷 익스플로러에서는 10부터 지원합니다.

이렇게 쓰면 다음과 같이 표시됩니다.

위와 같이 상자의 위쪽에서는 청록색이고 아래로 내려갈수록 점점 밝은 파랑이 됩니다. 다만 그라디언트를 지원하지 않는 브라우저에서는 그냥 하늘색으로 표시됩니다.

또한, 방향을 지정할 수도 있는데 방향은 색을 지정하기 전에 지정합니다. 다만 주의할 점이라면 -webkit- 접두어에서는 시작할 방향을, -moz-와 -o- 접두어에서는 끝날 방향을, 표준 형식에서는 앞에 to 쓴 다음 띄우고 끝날 방향을 씁니다.

selector {
	background: #55aaff;
	background: -webkit-linear-gradient(left, #55ffff, #5555ff);
	background:    -moz-linear-gradient(right, #55ffff, #5555ff);
	background:      -o-linear-gradient(right, #55ffff, #5555ff);
	background:         linear-gradient(to right, #55ffff, #5555ff);
}

예컨대 이 코드는 앞의 코드를 고쳐서 그라데이션 방향을 왼쪽에서 오른쪽으로 바꾼 예입니다. -webkit- 접두어의 경우 ‘왼쪽부터 시작’이라는 의미이고, 그 외는 ‘오른쪽으로 진행’이라는 의미입니다. 표준 구문에서는 의미를 분명히 하기 위해 ‘to’를 앞에 붙입니다.

이와 같이 오른쪽으로 진행됩니다.

또한, 대각선 방향으로 할 때도 같은 방식입니다.

selector {
	background: #55aaff;
	background: -webkit-linear-gradient(left top, #55ffff, #5555ff);
	background:    -moz-linear-gradient(bottom right, #55ffff, #5555ff);
	background:      -o-linear-gradient(bottom right, #55ffff, #5555ff);
	background:         linear-gradient(to bottom right, #55ffff, #5555ff);
}

이는 왼쪽 위에서 오른쪽 아래로 진행하는 예입니다.

이렇게 표시됩니다.

그리고 방향을 각도로 지정할 수도 있습니다.

selector {
	background: #55aaff;
	background: -webkit-linear-gradient(135deg, #55ffff, #5555ff);
	background:    -moz-linear-gradient(135deg, #55ffff, #5555ff);
	background:      -o-linear-gradient(135deg, #55ffff, #5555ff);
	background:         linear-gradient(135deg, #55ffff, #5555ff);
}

이는 각도로 방향을 지정한 예입니다. 0deg로 할 경우 아래에서 위로 진행되며 90deg로 하면 0deg에서 시계방향으로 90도 돌아서 왼쪽에서 오른쪽으로 진행됩니다. 이 예제처럼 135deg로 하면 0deg에서 시계방향으로 135도 돌아서 진행됩니다. 즉, 왼쪽 위에서 오른쪽 아래로 45도 각도로 비스듬히 진행됩니다.

이와 같습니다.

또한, 세 가지 색 이상의 연속 그라디언트도 가능합니다.

selector {
	background: #55ffff;
	background: -webkit-linear-gradient(#55ff55, #55ffff, #5555ff);
	background:    -moz-linear-gradient(#55ff55, #55ffff, #5555ff);
	background:      -o-linear-gradient(#55ff55, #55ffff, #5555ff);
	background:         linear-gradient(#55ff55, #55ffff, #5555ff);
}

이 예제는 그라디언트의 색을 연두에서 옥색을 거쳐 밝은 파랑으로 진행하는 예제입니다.

이렇게 연속으로 그라디언트가 진행됩니다. 이를 응용하면 무지개 그라디언트도 만들 수 있습니다.

또한,

selector {
	background: #55aaff;
	background: -webkit-repeating-linear-gradient(left, #55ffff, #5555ff 20%);
	background:    -moz-repeating-linear-gradient(right, #55ffff, #5555ff 20%);
	background:      -o-repeating-linear-gradient(right, #55ffff, #5555ff 20%);
	background:         repeating-linear-gradient(to right, #55ffff, #5555ff 20%);
}

이와 같이 repeating-linear-gradient를 쓰면 반복적인 그라디언트를 만들 수도 있습니다.

둥글게 퍼져나가는 그라디언트에 대해서는 CSS로 방사형 그라디언트 구현하기 포스트를 참고하시기 바랍니다.