배경 그라디언트를 만들 때마다 linear-gradient(...) 문법을 외워서 손으로 치는 대신, 색과 방향을 눈으로 확인하며 만들고 완성된 CSS를 그대로 복사하세요.
그라디언트 종류와 문법
- 선형(linear-gradient): 각도 하나로 방향을 정합니다.
90deg는 왼쪽에서 오른쪽,180deg는 위에서 아래입니다. - 방사형(radial-gradient): 중심에서 바깥으로 퍼집니다. 모양(원·타원)과 중심 위치를 고를 수 있습니다.
- 원뿔형(conic-gradient): 중심을 축으로 시계 방향으로 색이 돕니다. 시작 각도와 중심 위치를 고를 수 있습니다.
세 종류 모두 색상 정지점(color stop) 목록을 씁니다. 각 정지점은 색과 위치(0 ~ 100%)로 이뤄지고, 이 도구에서 최소 2개에서 최대 8개까지 추가·삭제·순서 바꾸기를 할 수 있습니다. 그라디언트 막대 위 핸들을 끌어 위치를 옮기거나, 막대를 눌러 원하는 자리에 정지점을 추가할 수도 있습니다.
OKLCH로 보간하면 왜 중간이 탁해지지 않을까
CSS 그라디언트는 기본적으로 sRGB 색공간에서 두 색의 빨강·초록·파랑 값을 직선으로 섞습니다. 문제는 사람이 느끼는 밝기가 이 숫자와 정비례하지 않는다는 점입니다. 그래서 색상환에서 서로 먼(반대에 가까운) 색을 섞으면 중간에서 밝기가 뚝 떨어져 탁하거나 회색에 가까운 색이 나타납니다.
- 빨강(#ff0000)에서 초록(#00ff00)으로: sRGB 중간은 칙칙한 올리브색(#808000)이지만, OKLCH 중간은 밝은 주황에 가깝습니다.
- 파랑(#0000ff)에서 노랑(#ffff00)으로: sRGB 중간은 거의 회색(#808080)이지만, OKLCH 중간은 선명한 청록에 가깝습니다.
OKLCH는 밝기(L)·채도(C)·색상각(H)을 따로 다루는 색공간이라, 밝기를 일정하게 유지하면서 색상만 옮겨 가기가 더 쉽습니다. 그 결과 중간색이 더 생생하게 유지됩니다. 이 도구의 ‘OKLCH로 보간’ 옵션을 켜면 실제로 이 계산을 적용한 그라디언트를 미리보기와 CSS 양쪽에서 확인할 수 있습니다.
브라우저 지원과 대안
in oklch 같은 색 보간 방식 지정 문법은 비교적 최근에 CSS 명세에 들어온 기능이라, 오래된 브라우저는 인식하지 못할 수 있습니다. 이 도구는 OKLCH 보간을 켜면 CSS를 복사할 때 두 줄을 만듭니다.
- 어느 브라우저에서나 똑같이 보이도록, OKLCH로 미리 계산한 색을 촘촘한 sRGB 정지점으로 바꿔 둔 대안 한 줄
- 실제
in oklch문법을 쓴 줄
같은 속성(background)을 두 번 선언하면 CSS는 나중에 나온 값을 최종으로 적용하므로, in oklch를 이해하는 브라우저는 두 번째 줄을 쓰고 이해하지 못하는 브라우저는 자동으로 첫 번째 줄을 씁니다. 실제 지원 범위는 계속 바뀌므로, 중요한 프로젝트라면 대상 브라우저 목록으로 직접 확인하는 것을 권합니다.