Conic Gradient 생성기

원뿔형 그레이디언트는 시곗바늘이 문자판을 훑듯 중심을 기준으로 색을 돌려 칠합니다. 그래서 이미지나 라이브러리 없이 파이 조각, 색상환, 로딩 링을 그릴 수 있는 유일한 그레이디언트입니다. 이 생성기는 타원·정사각형·직사각형·파이 모양 위에서 실시간 미리보기를 보여 주고, from 각도와 at 중심을 슬라이더로 조절하며, 색 정지점을 추가하고 옮기고 다시 칠할 수 있습니다.

만들어진 CSS는 정지점 위치를 백분율로 씁니다. conic-gradient()에서 100%는 한 바퀴이므로 25%는 정확히 90deg, 33.33%는 120deg입니다. 실제 비율을 차트로 옮길 때 필요한 환산이 바로 이것입니다. 또한 기본값과 같은 부분은 출력에서 빠집니다. 각도가 0이면 from 구문이, 중심이 50% 50%이면 at 구문이 사라져서, 복사되는 결과는 미리보기와 같은 뜻을 가진 가장 짧은 CSS가 됩니다.

같은 위치에 정지점을 둘 놓으면 섞이지 않고 경계선이 생기는데, 파이와 사분면 프리셋이 이 방식으로 만들어집니다. 놓치기 쉬운 점이 둘 있습니다. 색 보간은 기본적으로 sRGB에서 일어나므로 빨강 다음에 초록을 놓으면 사이의 색조를 지나가지 않고 탁한 올리브색을 통과합니다. 정지점 일곱 개짜리 무지개는 색상환을 흉내 낼 뿐 색상환이 아닙니다. 그리고 경계는 상자 모양과 무관하게 실제 각도에 놓이므로, 파이를 직사각형으로 늘리면 경계가 가리키는 방향은 그대로인 채 각 조각이 차지하는 면적만 달라집니다. 비율이 제대로 읽히는 것은 정사각형뿐입니다. Chromium 69, Firefox 83, Safari 12.1 이상에서 동작합니다.