CSS 그라디언트 생성

CSS Gradient Builder

정지점을 끌어 선형·원형·원뿔 그라디언트를 만들고 sRGB 또는 OKLCH CSS를 내보냅니다.

선형·원형·원뿔 그라디언트를 만들어 CSS로 내보냅니다. 정지점 사이에서 무슨 일이 일어날지 정하는 `in oklch` 보간 절도 함께 나옵니다. 같은 정지점을 sRGB로도 늘 아래에 한 번 더 그리는데, 지각 색 공간에서 보간해야 하는 이유는 눈으로 보는 것이 설명 한 문단보다 빠르기 때문입니다.

🔒 브라우저 안에서만 처리gradientcssgenerator

같은 정지점을 sRGB로 보간한 것입니다. 이 줄의 가운데가 위쪽보다 바래 보인다면 보간 공간이 제 일을 하고 있는 것입니다. sRGB 입방체를 가로지르는 직선은 반대편 색상 사이에서 무채색 축 가까이를 지나갑니다.

종류

반복

각도 135°CSS 각도는 12시 방향에서 시작해 시계 방향으로 돕니다. 수학의 관례와 달라서 90도는 위가 아니라 오른쪽입니다.

보간 공간

색상환을 따라 돌기 때문에 중간 지점도 채도를 유지합니다. 기본값이고, CSS에 이 문법이 생긴 이유입니다.

색상 경로색상환을 어느 방향으로 돌지 정합니다. longer는 정지점 두 개짜리를 무지개로 만듭니다. 극좌표 공간에서만 생기는 질문입니다.

정지점

0%
100%

프리셋

CSS

background-image: linear-gradient(135deg in oklch, #5b6cff 0%, #22d3ee 100%);

in oklch 절은 2023년 이후 브라우저가 필요합니다. 그 이전 엔진은 앞으로 물러나는 대신 선언 전체를 버리므로, 지원해야 한다면 앞 선언에 평범한 sRGB 그라디언트를 함께 두세요.

사용 방법

종류를 고르고 각도를 정합니다
선형은 직선으로 가고, 원형은 한 점에서 퍼지고, 원뿔은 한 점을 중심으로 돕니다. 각도는 선형과 원뿔에 적용되고, 원형은 각도 대신 모양과 중심을 받습니다.
정지점을 놓습니다
정지점마다 색과 0~100% 위치가 있습니다. 최소 두 개이고, 하나를 추가하면 위치가 균등하게 다시 배분된 뒤 옮길 수 있습니다. 정지점이 서너 개일 때 어떻게 되는지는 프리셋으로 빠르게 볼 수 있습니다.
보간 공간을 고릅니다. 이것이 진짜 결정입니다
OKLCH는 중간에서도 채도를 유지해서 파랑에서 노랑으로 갈 때 가운데가 회색이 되는 일을 막습니다. OKLab은 지각적으로 가장 짧은 길로 가며 두 색의 색상이 가까울 때 적합합니다. sRGB는 예전부터의 동작이고, 구형 브라우저와 최신 브라우저가 같은 결과를 내야 한다면 일부러 고를 만합니다.
극좌표 공간에서는 색상환을 도는 방향을 정합니다
OKLCH·LCH·HSL은 극좌표라 두 색상 사이에 갈 수 있는 호가 둘입니다. 기본값 `shorter`가 대개 원하는 쪽이고, `longer`는 정지점 두 개짜리를 무지개로 만듭니다. 가끔은 그게 정확히 원하는 효과이기도 합니다.
값만 또는 선언 전체를 복사합니다
값은 이미 있는 `background-image`에 넣으면 되고, 선언은 그대로 붙여넣으면 됩니다.

자주 묻는 질문

`in oklch`가 모든 브라우저에서 되나요?

아닙니다. 2023년 이후 엔진이 필요하고, 그 이전 엔진은 sRGB로 물러나는 대신 선언 전체를 버립니다. 부분 지원 같은 것은 없습니다. 앞 선언에 평범한 sRGB 그라디언트를 두고 최신 엔진이 덮어쓰게 하세요. 표준 CSS 폴백 방식이고 한 줄이면 됩니다.

sRGB 줄은 왜 가운데가 회색이 되나요?

sRGB에서 보간하면 색 입방체를 가로지르는 직선을 그리는데, 대략 반대편에 있는 두 색상을 잇는 직선은 무채색 축 가까이를 지나기 때문입니다. 그라디언트가 잘못된 것이 아니라 숫자가 시키는 대로 정확히 하고 있고, 그 숫자는 애초에 색이 어떻게 보이는지와 무관합니다.

그라디언트에 띠가 보이는데 여기서 고칠 수 있나요?

직접은 못 고칩니다. 띠는 넓은 면적에 걸친 완만한 변화를 8비트로 양자화하면서 생기는 것이라 보간 공간을 바꿔도 없어지지 않습니다. 흔한 해법은 옅은 노이즈를 덧씌우거나, 은은한 반복 무늬를 얹거나, 그라디언트가 지나는 거리를 줄이는 것입니다. 이 도구는 CSS만 만들고 디더링은 하지 않습니다.