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

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

CSS로 선형 그라디언트 구현하기 포스트에서 CSS를 사용하여 선형 그라디언트(색이 끝에서 다른 끝으로 가면서 변하는 형식)를 구현한 바 있는데, 방사형 그라디언트(색이 한 중심점에서 둥글게 퍼져 나가면서 변하는 방식)도 같은 방식으로 가능합니다.

기본적으로 다음과 같은 형식의 코드를 사용합니다.

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

기본적으로는 선형 그라디언트 구현에 쓰던 그 방식과 같습니다. 다만 다른 점이 있다면 linear-gradient 대신 radial-gradient를 쓴다는 점입니다.

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

이와 같이 한가운데를 중심점으로 하여 연두색부터 시작하고 청록색을 거쳐 밝은 파랑으로 둥글게 퍼져 나가는 것을 확인할 수 있습니다.

기본적으로는 상자가 직사각형일 때는 그 상자의 비율에 맞게 타원형으로 방사되지만, 설정값으로 앞에 circle을 부여하면 상자가 직사각형이더라도 정원형으로 방사됩니다.

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

이는 다음과 같이 표시됩니다.

circle 옵션을 부여하면 보는 바와 같이 상자는 직사각형이지만 정원형으로 방사되는 것을 볼 수 있습니다.

또한, 중심점을 상자의 한가운데가 아닌 다른 위치로 하거나 방사되는 거리(크기)를 조절할 수도 있습니다. 이 역시 옵션으로 지정 가능한데, -webkit-, -moz-, -o- 접두어에서는 ‘X Y, 크기‘ 형식이지만 표준 문법에서는 ‘크기 at X Y‘ 형식입니다. 또한, 좌표의 경우 상대치(10% 20% 등의 형식)로 지정할 수도 절대치(50px 25px 등의 형식)로 지정할 수도 있고 크기 역시 상대치와 절대치로 지정할 수 있는데 크기의 상대치는 백분율이 아니라 다음과 같은 4가지 중 선택하여 지정하게 됩니다.

closest-side

중심 좌표에서 가장 가까운 모서리까지 방사합니다.

farthest-side

중심 좌표에서 가장 먼 모서리까지 방사합니다.

closest-corner

중심 좌표에서 가장 가까운 꼭짓점까지 방사합니다.

farthest-corner

중심 좌표에서 가장 먼 꼭짓점까지 방사합니다. (기본값)

selector {
	background: #55ffff;
	background: -webkit-radial-gradient(25% 25%, farthest-corner, #55ff55, #55ffff, #5555ff);
	background:    -moz-radial-gradient(25% 25%, farthest-corner, #55ff55, #55ffff, #5555ff);
	background:      -o-radial-gradient(25% 25%, farthest-corner, #55ff55, #55ffff, #5555ff);
	background:         radial-gradient(farthest-corner at 25% 25%, #55ff55, #55ffff, #5555ff);
}

이 코드는 방사형 그라디언트의 중심점을 왼쪽에서 25%, 위에서 25%에 해당하는 지점으로 설정하고 방사 거리는 중심점에서 가장 먼 꼭짓점까지로 설정하는 코드입니다.

이렇게 표시됩니다.

그리고,

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

이와 같이 repeating-radial-gradient 함수의 사용으로 반복적인 방사형 그라디언트도 만들 수도 있습니다.