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

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

우선 아래 그림을 봐 주시기 바랍니다.

지금 이 페이지를 보고 있는 브라우저에서 원뿔형 그라디언트 CSS를 지원한다면, 양쪽 칸의 그림이 같은 그림으로 보일 것입니다. 현재 크롬 69 이상(안드로이드 크롬은 70 이상), 사파리 TP에서 지원합니다.
만약 왼쪽 칸이 회색 네모로 보이거나 아무것도 보이지 않는다면 지금 이 페이지를 보고 있는 브라우저가 원뿔형 그라디언트 CSS를 지원하지 않는 것입니다.

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

selector {
	background: #55ffff;
	background: conic-gradient(#55ff55, #55ffff, #5555ff);
}

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

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

이와 같이 중심점에서 시작하여 12시 방향부터 연두색으로 시작, 시계방향으로 돌면서 청록색을 거쳐 밝은 파랑으로 변합니다.

selector {
	background: #55ffff;
	background: conic-gradient(from 90deg, #55ff55, #55ffff, #5555ff);
}

이와 같이 from 각도를 먼저 지정하면, 그 각도부터 그라디언트가 시작됩니다. 이 예제는 90도(3시 방향)부터 시작한 예입니다.

selector {
	background: #55ffff;
	background: conic-gradient(from 90deg at 0% 0%,
	                #55ff55, #55ffff, #5555ff 90deg);
}

이 예제는 중심점을 다른 위치로 지정한 예입니다. 여기서는 중심점을 왼쪽 위 꼭짓점으로 하여 90도 각도에서 시작, 시작점으로부터 90도까지만 회전한 예입니다.

selector {
	background: #55ffff;
	background: conic-gradient(#0000ff 78%, #ff0000 0 96.67%, #555555 0);
	border-radius: 50%;
}

이 예제는 원뿔형 그라디언트를 이용하여 파이차트(원 그래프)를 그린 예입니다.

selector {
	background: #55ffff;
	background: conic-gradient(#000000 25%, #ffffff 0 50%,
	                           #000000 0 75%, #ffffff 0);
	background-size: 40px 40px;
}

원뿔형 그라디언트를 응용한 다른 예입니다. 위 그림처럼 원뿔형 그라디언트를 응용해 체스판을 그릴 수도 있습니다.