그라디언트 생성기 — 선형·방사형·원뿔형, OKLab 색 섞기, CSS·Tailwind 코드
두 가지 이상의 색이 부드럽게 이어지는 배경을 만들고 CSS와 Tailwind 코드로 복사합니다. 선형·방사형·원뿔형을 고를 수 있고, 방사형과 원뿔형은 중심 위치를 옮길 수 있습니다. 색을 섞는 방식을 OKLab·OKLCH로 바꾸면 파랑과 노랑처럼 먼 색 사이가 회색으로 탁해지지 않습니다.
CSS 그라디언트는 이미지 파일이 아니라 브라우저가 직접 그리는 배경입니다. 따로 내려받을 파일이 없어 페이지가 무거워지지 않고, 상자 크기가 바뀌어도 깨지지 않습니다. 버튼, 카드, 첫 화면 배경처럼 넓은 면을 채울 때 많이 씁니다.
미리보기에 보이는 모습은 아래 CSS를 그대로 적용한 결과입니다. 색 위치(%)를 바꾸면 그 색이 어디서 가장 진하게 나타날지 정해지고, 색을 추가하면 가장 넓게 비어 있는 구간 가운데에 들어갑니다.
세 가지 종류
| 종류 | 모양 | 조절하는 값 |
|---|---|---|
| 선형 | 한 방향으로 색이 흐름 | 각도 (0°는 아래→위, 90°는 왼쪽→오른쪽) |
| 방사형 | 한 점에서 바깥으로 퍼짐 | 원·타원 모양, 중심 위치 |
| 원뿔형 | 한 점을 중심으로 시계 방향으로 돎 | 시작 각도, 중심 위치 |
가운데가 탁해지는 이유와 OKLab
그라디언트는 두 색 사이의 중간색을 계산해 채웁니다. 오랫동안 쓰인 sRGB 방식은 빨강·초록·파랑 값을 단순히 평균 내기 때문에, 파랑(#0000ff)과 노랑(#ffff00)의 한가운데가 정확히 회색(50%, 50%, 50%)이 됩니다. 화면에서는 두 색 사이에 칙칙한 띠가 생긴 것처럼 보입니다.
OKLab은 사람 눈이 느끼는 밝기와 색 차이에 맞춰 만든 색 공간이라, 같은 두 색을 섞어도 가운데가 더 밝게 유지됩니다. OKLCH는 색상환을 따라 돌면서 섞어 파랑에서 노랑으로 갈 때 중간에 다른 색을 거칩니다. 둘 다 CSS 색 규격 4단계에 들어 있고, 크롬·엣지 111, 사파리 16.2, 파이어폭스 127부터 지원합니다.
이 방식을 고르면 CSS가 두 줄로 나옵니다. 첫 줄은 sRGB 그라디언트이고 둘째 줄이 OKLab·OKLCH 그라디언트입니다. 지원하지 않는 옛 브라우저는 둘째 줄을 무시하고 첫 줄을 쓰므로 배경이 사라지지 않습니다.
Tailwind 코드가 CSS와 같게 나오도록
흔히 쓰는 bg-gradient-to-br 같은 클래스는 '오른쪽 아래 모서리 방향'이라는 뜻이라, 정사각형이 아닌 상자에서는 135°와 방향이 달라집니다. 또 from·via·to 클래스로는 20%, 80% 같은 색 위치를 그대로 옮기기 어렵습니다.
그래서 이 도구는 CSS 값을 그대로 담은 임의값 클래스(bg-[…])를 만듭니다. 공백은 Tailwind 규칙에 따라 밑줄로 바꿉니다. 이 사이트가 쓰는 Tailwind 4로 직접 컴파일해 선형·방사형·원뿔형 모두 CSS와 똑같은 background-image가 나오는 것을 확인했습니다.
보기 좋게 만드는 요령
- •비슷한 계열의 색 두 개로 시작하세요. 색상환에서 가까운 색끼리는 어떤 방식으로 섞어도 자연스럽습니다.
- •보색처럼 먼 색을 이을 때는 OKLab을 켜 보세요. 가운데 탁한 띠가 눈에 띄게 줄어듭니다.
- •글자를 올릴 배경이라면 글자가 놓일 쪽의 색과 글자 색의 대비를 따로 확인하세요. 그라디언트는 위치마다 대비가 달라집니다.
- •원뿔형은 시작 색과 끝 색을 같게 하면 이음새 없이 한 바퀴가 이어집니다. 파이 차트나 색상환 모양을 만들 때 쓰입니다.
자주 묻는 질문
색 코드를 입력하는 중에 미리보기가 사라지나요?
아니요. #12처럼 아직 덜 입력한 값은 칸 테두리만 노랗게 표시하고, 3자리나 6자리 색 코드가 완성되는 순간 적용합니다. 그 전까지는 직전의 올바른 색을 유지합니다.
그라디언트를 애니메이션할 수 있나요?
색 위치 자체는 CSS 트랜지션으로 부드럽게 바뀌지 않습니다. background-size를 크게 잡고 background-position을 움직이는 방식이 가장 흔하고, 최신 브라우저에서는 @property로 등록한 사용자 속성을 색 위치에 써서 움직일 수도 있습니다.
만든 그라디언트가 저장되나요?
아니요. 브라우저 안에서만 동작합니다. 보관하려면 CSS를 복사해 두세요.