각도와 방향
linear-gradient의 각도는 시계 방향으로 재며 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 진행합니다. 브라우저 기본값은 180deg(to bottom)입니다. 135deg는 왼쪽 위에서 오른쪽 아래로 흐르는 대각선으로 카드·버튼 배경에 가장 흔히 쓰입니다. to right 같은 키워드 문법도 있지만 각도로 쓰면 미세 조정이 쉽습니다. conic-gradient의 from 각도는 색이 시작하는 방향(12시 기준)이고, radial-gradient는 각도 대신 모양(circle·ellipse)과 중심 위치를 받습니다. 이 페이지의 계산은 브라우저 안에서만 이루어집니다.
중간 지점(color stop)
각 색 뒤의 퍼센트는 그 색이 100% 순수하게 나타나는 위치입니다. 두 stop 사이는 자동으로 보간됩니다. 세 번째 색을 30%에 두면 시작 색에서 빨리 전환되고 끝 색까지는 천천히 변합니다. 같은 위치에 두 색을 겹쳐 두면(red 50%, blue 50%) 보간 없이 뚝 끊기는 줄무늬가 되는데, 이 도구는 매끄러운 전환만 다룹니다. 두 색의 색상환 거리가 멀면(예: 파랑→노랑) 중간이 탁한 회색으로 지나가므로, 중간 색을 하나 넣어 경로를 지정하면 훨씬 선명해집니다.
조합 예시
| 용도 | 시작 | 끝 | 각도 |
|---|---|---|---|
| 보라→분홍 (SaaS 히어로) | #6366f1 | #ec4899 | 135 |
| 새벽 하늘 | #0f172a | #3b82f6 | 180 |
| 석양 | #f97316 | #7c3aed | 160 |
| 민트·청록 (핀테크) | #14b8a6 | #0ea5e9 | 90 |
| 따뜻한 베이지 (배경) | #fdf2e9 | #fce7f3 | 135 |
| 다크 카드 | #1f2937 | #111827 | 180 |
| 숲 | #166534 | #a3e635 | 120 |
| 메탈릭 (radial) | #e5e7eb | #9ca3af | — |
글자 가독성
그라디언트 위의 글자는 한쪽 끝에서는 잘 보이고 반대쪽에서는 묻히기 쉽습니다. WCAG 대비율은 단색 배경을 가정하므로 그라디언트에는 가장 불리한 지점을 기준으로 판단해야 합니다. 안전한 방법은 글자 영역에 반투명 단색 박스를 깔거나, 양 끝 색의 명도를 비슷하게 맞추는 것입니다. 결과의 밝기 항목은 두 끝 색의 상대 휘도를 보여 주어 이 판단을 돕습니다.
자주 묻는 질문
접두사(-webkit-)는 안 넣어도 되나요?
2026년 기준으로 필요 없습니다. IE 10·구형 안드로이드 브라우저까지 지원해야 하는 특수한 경우가 아니면 표준 문법만 쓰는 것이 코드가 깔끔합니다.
색을 4개 이상 쓰고 싶어요.
이 도구는 3개까지 지원합니다. 결과 코드의 stop 목록에 같은 형식으로 "색 위치%"를 더 이어 붙이면 됩니다.
투명한 그라디언트는요?
색 입력이 불투명 HEX만 받으므로 결과 코드에서 #rrggbb를 rgba(…)나 #rrggbbaa 형식으로 직접 바꾸면 됩니다. 이미지 위에 어둡게 덮는 오버레이는 rgba(0,0,0,0)→rgba(0,0,0,.6)처럼 씁니다.