이 CSS 그라데이션 생성기는 색 지점 2~8개로 linear-gradient(), radial-gradient(), conic-gradient() 배경을 만듭니다. 그라데이션이 그려진 막대 위에서 지점을 끌어 옮기고, 막대를 눌러 지점을 추가하고, 선형·원뿔 그라데이션은 각도 다이얼을 돌리고, 원형·원뿔 그라데이션은 미리보기의 중심점을 끌어 옮긴 뒤 완성된 background: ...; 한 줄을 복사하면 됩니다.
히어로 배경, 버튼, 배너 띠, 아바타, 카드 머리글처럼 스타일시트를 건드리기 전에 정확한 결과를 확인하고 싶은 곳에 맞습니다. 모든 지점에 명시적인 퍼센트 위치와 선택적 알파가 있어 출력이 모호하지 않고, 같은 위치에 놓은 지점은 줄무늬나 분할 배경을 만드는 단단한 경계가 됩니다. 미리보기는 밝은 배경, 어두운 배경, 체커보드 위에 놓을 수 있어 투명한 지점도 확인할 수 있습니다.
선택 사항인 색 공간 스위치는 함수에 in oklab 또는 in oklch를 넣어 색이 sRGB가 아닌 지각적으로 고르게 섞이도록 합니다. 반복 그라데이션과 지점 사이 힌트는 만들지 않으며, 고른 색은 브라우저 안에서 처리되어 서버로 전송되지 않습니다.
사용 방법
종류와 예제 선택
선형, 원형, 원뿔 중 하나를 고르거나 석양, 하드 스트라이프, 무지개 원뿔 같은 예제로 시작합니다. 예제는 지점과 설정을 통째로 바꾸므로 이어서 고치세요.
지점 끌기
막대 위에서 지점을 끌어 옮기거나, 포커스를 두고 방향키(Shift는 10씩)로 움직입니다. 막대의 빈 곳을 누르면 그 위치에서 그라데이션이 가진 색으로 지점이 추가됩니다. 포커스된 지점에서 Delete를 누르거나 지점 삭제 버튼으로 지웁니다. 지점은 2~8개를 둘 수 있습니다.
선택한 지점의 색과 불투명도
선택한 지점의 색, 불투명도, 정확한 위치가 막대 아래에 나타납니다. 불투명도를 100% 아래로 두면 그 지점이
rgba()로 기록되며, 체커보드 배경에서 확인할 수 있습니다.다이얼 돌리기, 중심 옮기기
선형 그라데이션은 다이얼이 방향을, 원뿔 그라데이션은 시작 각도를 정합니다. Shift를 누르면 15도 단위로 맞춰집니다. 원형·원뿔 그라데이션은 미리보기의 점을 끌거나 중심 X, Y를 입력하세요. 원형은 원 또는 타원을 고를 수 있습니다.
색 공간 선택 후 복사
기본 sRGB는 익숙한 결과를, OKLab이나 OKLCH는 멀리 떨어진 색상 사이를 더 매끄럽게 섞어 줍니다. 그다음
background: ...;한 줄을 복사합니다.
작동 원리
그라데이션의 각도와 중심
W3C CSS Images Module Level 3·4는 linear-gradient()의 각도를 그라데이션 선이 향하는 방향으로 정의합니다. 0deg는 위를 가리켜 첫 색이 아래, 마지막 색이 위에 옵니다. 90deg는 오른쪽, 180deg는 아래, 270deg는 왼쪽입니다. 그라데이션 선은 상자 중심을 지나며 길이는 모서리가 정확히 첫 색과 마지막 색을 받도록 정해집니다.
원형 그라데이션은 중심점에서 바깥으로 퍼지며 radial-gradient(circle at 35% 30%, ...)처럼 쓰고, 모양은 원이거나 상자 비율을 따르는 타원입니다. 원뿔 그라데이션은 색상환처럼 중심점을 돌며 쓸어 가고 conic-gradient(from 90deg at 50% 50%, ...)처럼 씁니다. from은 시작 방향을 돌리고 지점의 퍼센트는 0~360도에 대응합니다.
| 종류 | 각도의 의미 | 중심 | 지점 100%의 위치 |
|---|---|---|---|
| linear | 그라데이션 선의 방향 | 항상 상자 중심 | 선의 먼 끝 |
| radial | 쓰지 않음 | at X% Y% | 가장 먼 모서리 |
| conic | 시작 각도(from) | at X% Y% | 한 바퀴(360도) |
색 지점 사이는 어떻게 섞이나
지점은 색과 위치로 이루어지고, 브라우저는 이웃한 지점 사이를 섞습니다. 기본은 sRGB 색 공간이라 파랑과 주황처럼 보색에 가까운 색 사이에서 탁한 회색을 지날 수 있습니다. in oklab이나 in oklch(CSS Color Module Level 4)를 붙이면 지각적으로 고른 공간에서 섞여 선명한 색이 선명하게 유지됩니다. 오래된 브라우저는 이 키워드가 있는 그라데이션 전체를 무시하므로, 필요하다면 단색 background-color를 대비책으로 두세요.
이웃한 두 지점이 같은 위치를 쓰면 전환이 사라져 #ff0000 50%, #0000ff 50%처럼 단단한 경계가 됩니다. 도구는 결과를 쓸 때 위치 순으로 정렬하므로 지점을 이웃 너머로 끌어도 문제가 없고, 위치가 같은 지점은 목록의 순서를 유지합니다.
도구가 출력하는 형식
출력은 linear-gradient(<각도>deg, <색> <위치>%, ...), radial-gradient(<모양> at <x>% <y>%, ...), conic-gradient(from <각도>deg at <x>% <y>%, ...)이며, 색 공간을 고르면 여는 괄호 바로 뒤에 in oklab 또는 in oklch가 붙습니다. 불투명한 지점은 소문자 16진수로, 반투명한 지점은 rgba(r, g, b, a)로 적힙니다.
실제 예시
linear, 각도 135, #17201d 0, #577590 50, #d8ff65 100background: linear-gradient(135deg, #17201d 0%, #577590 50%, #d8ff65 100%);가운데 지점을 50에서 20으로 옮기면 중간색이 시작색 쪽으로 당겨집니다.
radial circle at 35% 30%, #ffffff 0, #8b5cff 45, #0b0d12 100background: radial-gradient(circle at 35% 30%, #ffffff 0%, #8b5cff 45%, #0b0d12 100%);미리보기의 점을 끌면 중심의 두 퍼센트가 바뀝니다.
conic from 0deg at 50% 50%, #ff5c8a 0, #ffb547 25, #d4ff3a 50, #3de7ff 75, #ff5c8a 100background: conic-gradient(from 0deg at 50% 50%, #ff5c8a 0%, #ffb547 25%, #d4ff3a 50%, #3de7ff 75%, #ff5c8a 100%);100%에 첫 색을 한 번 더 두면 이음새 없이 원이 닫힙니다.
linear 90deg, #ff5c8a 0과 33, #ffb547 33과 66, #3de7ff 66과 100background: linear-gradient(90deg, #ff5c8a 0%, #ff5c8a 33%, #ffb547 33%, #ffb547 66%, #3de7ff 66%, #3de7ff 100%);같은 위치의 두 지점은 색이 갑자기 바뀌어 단색 띠 세 개가 됩니다.
linear 100deg, OKLCH, #8b5cff 0, #3de7ff 50, #d4ff3a 100background: linear-gradient(in oklch 100deg, #8b5cff 0%, #3de7ff 50%, #d4ff3a 100%);sRGB로 바꿔 중간 색상이 어떻게 달라지는지 비교해 보세요. 이 보라와 청록 조합은 sRGB에서도 회색이 되지 않습니다.
linear 180deg, #ff0000 60, #0000ff 40background: linear-gradient(180deg, #0000ff 40%, #ff0000 60%);오류로 거부하지 않고 위치 순으로 정렬해 출력합니다.
자주 하는 실수
0deg가 아래를 향한다고 착각
0deg는 위쪽으로 향하는 그라데이션이라 첫 색이 아래에 옵니다. 어두운 색을 위에 두고 싶다면180deg이거나to bottom이어야 합니다.보색 사이에 생기는 회색 구간
sRGB에서 반대 색상 두 개를 섞으면 탁한 회색을 지납니다. 색 공간을 OKLCH로 바꾸거나, 채도 높은 중간색으로 의도적인 가운데 지점을 추가하세요.
변하는 배경 위의 글자 대비
그라데이션은 글자 아래의 대비를 한쪽 끝에서 다른 쪽 끝까지 바꿉니다. 평균이 아니라 가장 밝은 영역과 가장 어두운 영역에서 글자색과의 대비를 확인하세요.
은은한 그라데이션의 띠 현상
넓은 면적에 비슷한 두 색을 쓰면 8비트 디스플레이에서 단계가 눈에 보입니다. 약한 노이즈 오버레이나 더 큰 색 차이로 가릴 수 있습니다.
background-color에 사용
그라데이션은 색이 아니라 이미지입니다.
background-color: linear-gradient(...)는 유효하지 않으니background나background-image를 쓰세요.
자주 묻는 질문
대각선 그라데이션은 어떻게 만드나요?
선형을 고르고 다이얼을 45, 135, 225, 315도로 맞추세요. 135deg는 왼쪽 위에서 오른쪽 아래로 흐릅니다.
linear-gradient에서 0deg는 무슨 뜻인가요?
그라데이션 선이 위를 향한다는 뜻이라 첫 색이 아래, 마지막 색이 위에 옵니다. 90deg는 오른쪽, 180deg는 아래를 향합니다.
원형과 원뿔 그라데이션은 어떻게 만드나요?
종류를 원형 또는 원뿔로 바꾸세요. 원형은 원·타원 모양과 중심이, 원뿔은 시작 각도와 중심이 추가됩니다. 어느 쪽이든 미리보기의 중심점을 끌어 옮깁니다.
색 지점은 몇 개까지 추가할 수 있나요?
2개에서 8개까지입니다. 막대를 눌러 추가한 뒤 끌거나 위치를 입력하세요. Delete는 포커스된 지점을 지우며 최소 2개는 남습니다.
섞임 없이 선명한 줄무늬는 어떻게 만드나요?
이웃한 두 지점에 50과 50처럼 같은 위치를 주세요. 그 지점에서 색이 갑자기 바뀝니다.
-webkit-linear-gradient 같은 벤더 접두어가 필요한가요?
아니요. 접두어 없는 그라데이션 함수는 현재 모든 브라우저가 오래전부터 지원합니다. 접두어는 아주 오래된 Safari, Chrome, Firefox 버전에서만 필요했습니다.
그라데이션을 글자색으로 쓸 수 있나요?
가능하지만 다른 패턴을 씁니다. 그라데이션을 배경으로 적용하고 background-clip: text와 color: transparent를 사용하세요. 생성된 그라데이션 값은 그대로 쓸 수 있습니다.
마지막 업데이트: