색과 방향을 미리보기로 확인하면서 그라디언트를 만들고, 완성된 background 선언을 복사해 가는 도구입니다. 처음에는 “노을” 프리셋이 들어 있고 CSS는 background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);입니다.
사용 방법
- 프리셋: 노을, 바다, 캔디, 모노톤, 오로라 다섯 가지 가운데 하나를 눌러 시작점으로 삼습니다.
- 종류: “선형”, “방사형”, “원뿔형” 중에서 고릅니다. 종류에 따라 아래 옵션이 달라집니다.
- 색상 정지점: 색과 위치를 정합니다. 자세한 조작은 다음 절에 있습니다.
- OKLCH로 보간 (in oklch): 켜면 색 사이를 OKLCH 색공간에서 잇습니다.
- CSS: 지금 설정으로 만든 선언이 보이고, “CSS 복사”로 가져갑니다.
| 종류 | CSS 함수 | 고를 수 있는 옵션 |
|---|---|---|
| 선형 | linear-gradient |
각도. 90deg는 왼쪽에서 오른쪽, 180deg는 위에서 아래입니다 |
| 방사형 | radial-gradient |
모양(“원”, “타원”)과 중심 위치 |
| 원뿔형 | conic-gradient |
각도(색이 돌기 시작하는 방향)와 중심 위치 |
각도는 숫자 칸에 직접 넣거나 슬라이더로 0 ~ 360 사이를 고릅니다. 숫자 칸에는 360보다 큰 값이나 음수도 넣을 수 있고 넣은 그대로 CSS에 들어갑니다. 중심 위치는 가운데, 네 변, 네 모서리의 아홉 곳 중에서 고릅니다.
정지점 다루기
색상 정지점(color stop)은 “이 위치에서는 이 색”이라고 정해 둔 점이고, 그라디언트는 정지점 사이를 이어서 만듭니다. 2개에서 8개까지 둘 수 있습니다.
- 그라디언트 막대의 빈 곳을 누르면 그 자리에 정지점이 생깁니다. 색은 그 자리에 보이던 색이라, 추가한 직후에는 그라디언트의 모양이 바뀌지 않습니다. 그대로 끌어 옮기거나 색을 바꾸면 됩니다.
- “정지점 추가” 버튼은 마지막 정지점과 100% 사이의 가운데에 흰색(#ffffff) 정지점을 넣습니다. 마지막 정지점이 이미 100%에 있으면 겹치지 않도록 정지점 사이가 가장 넓은 구간의 가운데에 넣습니다. 0%와 100%에 하나씩 있으면 50%에 생깁니다.
- 핸들을 끌거나 목록의 위치 칸에 숫자를 넣어 위치를 바꿉니다. 키보드로는 핸들에서 방향키로 1%씩, Shift와 함께 누르면 10%씩 옮기고 Delete로 삭제합니다.
- 목록의 위로·아래로 버튼은 이웃한 정지점과 위치를 맞바꿉니다. 색의 순서를 뒤집을 때 씁니다.
- 삭제는 정지점이 3개 이상일 때만 할 수 있습니다.
목록은 언제나 위치 순서로 정렬되어 보이고, CSS에도 위치 순서로 들어갑니다. 위치는 소수 첫째 자리까지 적습니다.
색상 입력 형식: 정지점 색으로 읽는 것은 HEX(3·4·6·8자리), 색 이름, rgb(), hsl(), oklch(), transparent입니다. hwb(), lab(), lch(), color() 함수와 var()로 쓴 변수는 읽지 못합니다. 읽지 못한 색이 있으면 “이 도구가 읽을 수 있는 CSS 색상이 아닙니다.“가 나오고, 그 정지점은 미리보기와 CSS에서 빠집니다. 읽은 색은 입력한 표기 그대로 CSS에 들어갑니다.
OKLCH로 보간하면 중간색이 달라집니다
정지점 색을 HEX, 색 이름, rgb(), hsl()로만 적은 CSS 그라디언트는 따로 정하지 않으면 sRGB 색공간에서 두 색의 빨강·초록·파랑 값을 각각 직선으로 섞습니다. 사람이 느끼는 밝기는 이 숫자와 비례하지 않아서, 색상환에서 멀리 떨어진 두 색을 섞으면 가운데가 어둡고 탁해집니다. OKLCH는 밝기(L), 채도(C), 색상각(H)을 따로 다루고 세 값을 각각 이어 가므로, 가운데에서 밝기와 채도가 꺼지지 않습니다.
두 정지점을 0%와 100%에 두고 막대의 50% 지점 색을 계산하면 다음과 같습니다.
| 두 색 | sRGB로 섞은 가운데 | OKLCH로 섞은 가운데 |
|---|---|---|
빨강 #ff0000 → 초록 #00ff00 |
#808000 (어두운 올리브색) |
#f99500 (밝은 주황) |
파랑 #0000ff → 노랑 #ffff00 |
#808080 (회색) |
#00cfbd (청록) |
노을 프리셋 #ff7e5f → #feb47b |
#ff996d |
#ff9a68 |
색상이 멀수록 차이가 크고, 노을 프리셋처럼 비슷한 색끼리는 거의 차이가 없습니다. OKLCH로 섞으면 가운데에 두 색 어디에도 없던 색상이 나타난다는 점도 알아 두세요. 빨강과 초록 사이에 주황과 노랑이 지나가는 것이 그 예입니다. 두 색이 곧장 섞이기를 바란다면 옵션을 끄는 편이 맞습니다.
복사되는 CSS가 두 줄인 이유
in oklch처럼 보간 방식을 정하는 문법은 CSS에 비교적 늦게 들어와서 알아듣지 못하는 브라우저가 있습니다. 그래서 OKLCH 보간을 켜면 선언이 두 줄로 나옵니다. 빨강에서 초록으로 가는 선형 그라디언트라면 이렇습니다.
background: linear-gradient(90deg, #ff0000 0%, #ff3300 12.5%, #ff5600 25%, #ff7600 37.5%, #f99500 50%, #e3b200 62.5%, #c2ce00 75%, #8fe800 87.5%, #00ff00 100%);
background: linear-gradient(90deg in oklch, #ff0000 0%, #00ff00 100%);- 첫째 줄은 대안입니다. 이웃한 정지점 사이를 8등분해서 OKLCH로 계산한 중간색 7개를 보통의 HEX 정지점으로 끼워 넣었습니다. 정지점이 2개면 9개, 3개면 17개로 늘어납니다.
- 둘째 줄은
in oklch문법 그대로입니다.
같은 속성을 두 번 선언하면 나중 것이 적용되므로, in oklch를 아는 브라우저는 둘째 줄을 쓰고 모르는 브라우저는 둘째 줄을 무시한 채 첫째 줄을 씁니다.
OKLCH 보간을 켠 동안 화면의 미리보기와 그라디언트 막대는 어느 브라우저에서 열든 첫째 줄 방식으로 그립니다. 대안 줄은 중간색을 sRGB 범위에 맞춰 HEX로 적은 근삿값이라, 둘째 줄을 브라우저가 직접 그린 결과와 색이 조금 다를 수 있습니다. 색이 중요한 작업이라면 붙여넣은 뒤 대상 브라우저에서 확인하세요.
이 도구로 만들 수 없는 것
repeating-linear-gradient같은 반복 그라디언트. 복사한 CSS의 함수 이름 앞에repeating-을 붙이고 정지점 범위를 직접 고쳐야 합니다.- 방사형의 크기(
closest-side등)와at 30% 70%같은 좌표로 정하는 중심 위치 - 여러 그라디언트를 쉼표로 겹친 배경
- 퍼센트가 아닌
px단위의 정지점 위치 in hsl,in oklab같은 다른 보간 방식