CSS 그라데이션 생성기는 시작 색과 끝 색, 그리고 방향(각도)만 정하면 웹에서 바로 쓸 수 있는 linear-gradient CSS 코드를 만들어 주는 도구입니다. 색을 고르면 위쪽 미리보기 박스에 결과가 즉시 반영되고, 아래에 background: linear-gradient(...) 형태의 코드가 나오므로 복사 버튼 한 번으로 그대로 프로젝트에 붙여 넣을 수 있습니다.
그라데이션(gradient)은 두 개 이상의 색이 부드럽게 이어지는 색상 전환 효과입니다. 예전에는 이런 표현을 이미지 파일로 만들어 넣어야 했지만, 지금은 CSS 한 줄이면 화질 저하 없이, 파일 용량 부담 없이, 어떤 화면 크기에서도 선명하게 배경을 채울 수 있습니다. 버튼·카드·히어로 배경·아이콘 등 웹 UI 곳곳에서 가장 손쉽게 분위기를 바꾸는 방법이기도 합니다.
이 도구는 그중 가장 널리 쓰이는 직선형 그라데이션(linear-gradient)을 다룹니다. 아래에서는 linear-gradient와 radial-gradient의 차이, 방향을 정하는 각도(deg) 개념, 색이 바뀌는 지점을 지정하는 색상 정지점(color stop), 생성한 코드를 실제 CSS에 적용하는 방법, 그리고 디자인에서 그라데이션을 자연스럽게 쓰는 요령까지 정리했습니다.
사용 방법
- '시작' 색상 선택기를 눌러 그라데이션이 시작되는 첫 번째 색을 고릅니다. 미리보기 박스 왼쪽(각도에 따라 위쪽) 색이 됩니다.
- '끝' 색상 선택기로 두 번째 색을 고릅니다. 두 색의 색상환 거리가 가까울수록 은은하고, 멀수록 대비가 강한 그라데이션이 됩니다.
- '각도' 슬라이더를 움직여 색이 흐르는 방향을 0°~360°로 조절합니다. 0°는 아래에서 위로, 90°는 왼쪽에서 오른쪽으로 색이 진행됩니다.
- 마음에 드는 조합이 나오면 아래 코드 상자의 '복사' 버튼을 눌러 background 속성 코드를 클립보드에 담아 CSS에 붙여 넣습니다. 감이 잡히지 않을 땐 '🎲 랜덤 색' 버튼으로 우연한 조합을 탐색해 보세요.
linear-gradient와 radial-gradient의 차이
CSS 그라데이션은 크게 직선형(linear)과 원형(radial)으로 나뉩니다. linear-gradient는 색이 한 방향으로 곧게 흐르고, radial-gradient는 중심점에서 바깥으로 원(또는 타원)을 그리며 퍼집니다. 이 생성기는 가장 활용도가 높은 linear-gradient 코드를 만들어 줍니다.
| 종류 | 색 진행 방향 | 대표 문법 | 잘 어울리는 곳 |
|---|---|---|---|
| linear-gradient | 지정한 각도로 직선 | linear-gradient(90deg, #fff, #000) | 배경 전체, 버튼, 헤더 바 |
| radial-gradient | 중심에서 바깥으로 원형 | radial-gradient(circle, #fff, #000) | 스포트라이트, 원형 배지, 조명 효과 |
| conic-gradient | 중심을 축으로 회전 | conic-gradient(#fff, #000) | 원형 차트, 컬러 휠, 로딩 표시 |
이 도구가 만드는 코드
이 생성기의 출력은 background: linear-gradient(각도deg, 시작색, 끝색); 형태입니다. radial-gradient나 conic-gradient가 필요하다면, 만들어진 색 조합을 그대로 두고 함수 이름만 바꿔 응용할 수 있습니다.
방향을 정하는 각도(deg) 이해하기
linear-gradient의 첫 번째 값은 색이 흐르는 방향입니다. 각도(deg) 또는 to right, to bottom 같은 키워드로 지정할 수 있습니다. CSS의 각도는 '위쪽(0°)을 기준으로 시계 방향'으로 커집니다. 즉 0°는 아래에서 위로 색이 올라가고, 90°는 왼쪽에서 오른쪽으로, 180°는 위에서 아래로 진행됩니다.
| 각도 | 진행 방향 | 동일한 키워드 |
|---|---|---|
| 0deg | 아래 → 위 | to top |
| 90deg | 왼쪽 → 오른쪽 | to right |
| 180deg | 위 → 아래 | to bottom |
| 270deg | 오른쪽 → 왼쪽 | to left |
| 135deg | 왼쪽 위 → 오른쪽 아래 | to bottom right |
각도가 헷갈릴 때
linear-gradient의 각도는 '색이 향하는 목적지'를 가리킵니다. 90deg는 오른쪽을 향하므로 왼쪽이 시작색, 오른쪽이 끝색이 됩니다. 시계 방향이라는 점만 기억하면 슬라이더를 조금씩 움직이며 원하는 방향을 쉽게 찾을 수 있습니다.
색상 정지점(color stop)이란
색상 정지점(color stop)은 '어느 위치에서 어떤 색이 되는지'를 지정하는 값입니다. linear-gradient(90deg, #fff, #000)처럼 위치를 생략하면 색들이 0%에서 100%까지 균등하게 나뉩니다. 하지만 각 색 뒤에 백분율을 붙이면 색이 바뀌는 지점을 정밀하게 조절할 수 있습니다.
예를 들어 linear-gradient(90deg, #6366f1 0%, #ec4899 100%)는 이 도구의 기본 출력과 같습니다. 정지점을 linear-gradient(90deg, #6366f1 0%, #ec4899 60%)로 바꾸면 60% 지점에서 이미 끝색에 도달하고 그 뒤는 끝색으로 채워져, 전환이 앞쪽으로 몰립니다.
- 색 두 개를 같은 위치에 두면(예: #fff 50%, #000 50%) 그라데이션 없이 딱 잘린 2색 분할이 됩니다.
- 색을 세 개 이상 넣으면(예: red, yellow, green) 여러 색을 잇는 무지개형 그라데이션을 만들 수 있습니다.
- 가운데 색을 추가하면 두 극단 색이 탁하게 섞이는 '중간 회색화'를 피해 더 선명한 전환을 얻습니다.
부드러운 그라데이션의 요령
채도가 높은 두 색을 직접 이으면 중간이 칙칙해지기 쉽습니다. 두 색의 중간쯤 되는 밝은 색을 색상 정지점으로 하나 더 끼워 넣으면 훨씬 맑고 자연스러운 전환이 만들어집니다.
생성한 코드를 실제로 적용하기
복사한 코드는 background 속성이므로, 색을 넣고 싶은 요소의 CSS에 그대로 붙이면 됩니다. HTML/CSS는 물론 React의 인라인 스타일, Tailwind의 임의 값 문법에서도 쓸 수 있습니다.
| 환경 | 작성 방법 |
|---|---|
| 일반 CSS | .hero { background: linear-gradient(135deg, #6366f1, #ec4899); } |
| 인라인 style | <div style="background: linear-gradient(135deg, #6366f1, #ec4899)"> |
| React (JSX) | style={{ background: 'linear-gradient(135deg, #6366f1, #ec4899)' }} |
| Tailwind 임의 값 | class="bg-[linear-gradient(135deg,#6366f1,#ec4899)]" |
글자에 그라데이션을 입히려면
텍스트 자체를 그라데이션으로 채우려면 background에 더해 background-clip: text; color: transparent; 를 함께 지정합니다. 이렇게 하면 배경 그라데이션이 글자 모양으로만 보여, 눈에 띄는 제목이나 로고 텍스트를 만들 수 있습니다.
디자인에서 그라데이션 잘 쓰는 법
그라데이션은 강력하지만 과하면 촌스러워지기 쉽습니다. 아래 원칙을 지키면 세련된 결과를 얻을 수 있습니다.
- 색상환에서 가까운 두 색(예: 파랑→보라, 분홍→주황)을 쓰면 조화롭고 고급스러운 느낌이 납니다. 정반대 색은 대비가 강해 튀므로 강조 요소에만 제한적으로 씁니다.
- 배경으로 쓸 때는 채도와 명도를 낮춰 은은하게 하고, 그 위에 올라가는 글자와의 명도 대비를 충분히 확보해 가독성을 지킵니다.
- 한 화면에는 그라데이션을 한두 곳에만 써서 시선의 중심을 만듭니다. 모든 요소에 넣으면 정보 위계가 무너집니다.
- 각도를 통일하면(예: 사이트 전체를 135°로) 여러 요소가 하나의 디자인 언어로 묶여 일관성 있어 보입니다.
자주 묻는 질문
- 생성된 코드를 어디에 붙여 넣나요?
- 코드는 CSS의 background 속성입니다. 색을 넣고 싶은 요소의 스타일에 그대로 붙여 넣으면 됩니다. 예를 들어 .hero { background: linear-gradient(135deg, #6366f1, #ec4899); } 처럼 쓰거나, HTML 요소의 style 속성, React의 인라인 style 객체에 넣어도 동작합니다.
- 각도 90deg는 어느 방향인가요?
- CSS 그라데이션의 각도는 위쪽(0deg)을 기준으로 시계 방향으로 커집니다. 90deg는 오른쪽을 향하므로 왼쪽이 시작색, 오른쪽이 끝색이 됩니다. 180deg는 위에서 아래로, 135deg는 왼쪽 위에서 오른쪽 아래로 색이 흐릅니다.
- 색을 세 개 이상 넣을 수 있나요?
- 이 도구는 두 색 조합을 만들어 주지만, CSS 문법 자체는 색 개수에 제한이 없습니다. 복사한 코드에서 색을 추가해 linear-gradient(90deg, red, yellow, green)처럼 쉼표로 색을 계속 이어 붙이면 여러 색이 연결된 그라데이션이 됩니다.
- linear-gradient와 radial-gradient는 뭐가 다른가요?
- linear-gradient는 지정한 각도를 따라 색이 직선으로 흐르고, radial-gradient는 중심점에서 바깥으로 원을 그리며 퍼집니다. 배경 전체나 버튼에는 직선형이, 스포트라이트나 원형 배지 같은 조명 효과에는 원형이 잘 어울립니다. 이 도구가 만든 색 조합을 두고 함수 이름만 radial-gradient(circle, ...)로 바꾸면 원형으로 응용할 수 있습니다.
- 그라데이션 가운데가 탁하게 보이는데 왜 그런가요?
- 채도가 높은 두 색을 바로 이으면 RGB 값이 섞이면서 중간 지점이 회색빛으로 칙칙해지기 쉽습니다. 두 색의 중간쯤 되는 밝은 색을 색상 정지점으로 하나 더 넣으면(예: 파랑, 하늘색, 분홍) 중간 회색화를 피해 훨씬 맑은 전환을 얻을 수 있습니다.
- 만든 그라데이션을 글자에 입힐 수 있나요?
- 네. 텍스트 요소에 이 코드를 background로 넣고, background-clip: text; 와 color: transparent; 를 함께 지정하면 배경 그라데이션이 글자 모양으로만 보입니다. 눈에 띄는 제목이나 로고 텍스트에 자주 쓰는 기법입니다. 일부 브라우저 호환을 위해 -webkit-background-clip: text; 를 함께 넣기도 합니다.
- 그라데이션은 모든 브라우저에서 보이나요?
- linear-gradient는 오래전부터 모든 최신 브라우저가 지원하는 표준 CSS 기능이라 별도 처리 없이 잘 보입니다. 아주 오래된 브라우저까지 고려한다면 background-color로 대체 단색을 함께 지정해 두는 정도면 충분합니다.