CSS 그라데이션 생성기

CSS 그라데이션 생성기란?#

CSS 그라데이션은 두 개 이상의 색 사이의 부드러운 전환으로, 브라우저가 선, 광선, 또는 각도를 따라 칠합니다. 잘 쓰면 하나의 그라데이션이 200킬로바이트짜리 배경 이미지를 대체합니다. 어떤 크기로든 확장되고, 모든 화면에서 선명하며, CSS 한 줄로 배포됩니다. 어려운 부분은 문법을 쓰는 게 아니라 색, 각도, 정지점을 조정하면서 결과를 보는 것입니다.

이 페이지는 그것을 위한 실시간 작업대입니다. 정지점을 드래그하고, 각도를 밀고, 다섯 가지 그라데이션 종류를 전환하면, 페이지는 스타일시트에 필요한 정확한 linear-gradient(...)(또는 radial-, conic-, repeating-) 선언을 내놓습니다. 게다가 각 색을 재사용 가능한 토큰으로 바꾸는 바로 붙여넣을 수 있는 Tailwind v4 @theme 스니펫도 함께요.

사용 방법#

1. 그라데이션 유형을 고르세요.
   • 선형 — 선택한 각도의 직선을 따라 색이 전환됩니다. 기본값이며 대부분의 사용 사례를 덮습니다.
   • 방사형 — 중심점에서 바깥으로 색이 방사합니다. 스포트라이트와 비네트에 좋습니다.
   • 원뿔형 — 색이 파이 차트처럼 중심을 중심으로 쓸고 지나갑니다. 색상환과 스피너 배경에 유용합니다.
   • 반복 선형 / 반복 방사형 — 같은 그라데이션이 바둑판으로 반복되어 줄무늬나 동심원을 만듭니다.
2. 선형과 원뿔형 유형에서는 각도 슬라이더(0–359°)를 드래그하세요. 미리보기가 실시간으로 갱신됩니다. 0°는 위쪽, 90°는 오른쪽, 135°는 고전적인 좌상→우하 대각선입니다.
3. 방사형 유형에서는 모양을 고르세요. 원 또는 타원(반응형 전체 폭 배경의 기본값).
4. 색상 정지점을 관리하세요.
   • 각 정지점은 색 견본과 그라데이션 막대 위의 위치(0–100%)를 가집니다.
   • 막대의 핸들을 드래그해 정지점을 옮기거나, 정확한 위치를 입력하세요.
   • 정지점 추가를 클릭해 새 정지점을 끼워 넣고, 정지점의 ×를 클릭해 삭제하세요.
   • 그라데이션에는 최소 두 개의 정지점이 필요합니다.
5. 아래의 두 출력을 읽으세요. CSS(날것의 그라데이션 값)와 Tailwind v4(각 색을 --color-grad-* 토큰으로 등록하는 @theme 블록과 그것들을 소비하는 .bg-gradient 유틸리티). 각각 옆의 복사 버튼을 사용하세요.

주요 특징#

• 하나의 도구에 다섯 가지 그라데이션 종류. 선형, 방사형, 원뿔형, 두 반복 변형. 색을 다시 입력하지 않고도 전환할 수 있습니다.
• 실시간, 픽셀 단위 정확한 미리보기. 오른쪽 큰 블록이 실제로 배포할 그라데이션입니다. 보이는 것이 스타일시트가 받는 것입니다.
• 드래그 핸들 정지점 막대. 드래그해서 색 정지점의 위치를 바꿉니다. 이동하면 백분율이 갱신됩니다.
• 이중 출력. 직접 작성한 스타일시트를 위한 날것의 CSS, 그리고 유틸리티 우선 프로젝트를 위한 Tailwind v4 @theme 스니펫(각 정지점이 .bg-gradient 유틸리티가 소비하는 --color-grad-* 토큰으로). 둘 다 항상 동기화됩니다.
• 각도 표시. 슬라이더 옆에 정확한 도수가 표시되어 다른 곳에서도 그라데이션을 정확히 재현할 수 있습니다.
• 업로드 없음. 색, 정지점, 각도는 브라우저를 떠나지 않습니다.

실제 예시#

남색에서 청록으로 가는 차분하고 약간 대각선인 브랜드 그라데이션을 원한다고 합시다. 선형을 선택하고 각도를 **135°**로 설정한 뒤 두 정지점을 쓰세요.

• 정지점 1: 0%의 #4F46E5 (남색)
• 정지점 2: 100%의 #0D9488 (청록)

CSS 출력은 다음과 같습니다.

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

그리고 Tailwind v4 스니펫은 다음과 같습니다.

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

hex 값을 인라인하는 대신, Tailwind 출력은 각 정지점을 @theme 안의 --color-grad-* 디자인 토큰으로 등록한 뒤 단일 .bg-gradient 유틸리티를 var(...)로 가리킵니다. 변수 하나를 바꾸면 그것을 소비하는 모든 곳이 한꺼번에 갱신됩니다. 중간에 세 번째, 더 부드러운 색을 원하나요? 정지점 추가를 클릭해 50%에 #7C3AED를 설정하면 스니펫에 --color-grad-2: #7C3AED 토큰이 늘어나고 청록은 --color-grad-3으로 밀립니다. 정지점은 항상 위치순으로 다시 번호가 매겨지므로 이름이 막대와 어긋나는 일이 없습니다.

FAQ#

선형, 방사형, 원뿔형의 차이는?#

선형은 각도로 정의된 직선을 따라 전환합니다. 방사형은 한 점에서 바깥으로 전환하여 원이나 타원 형태의 색을 만듭니다. 원뿔형은 점 주변으로 전환합니다. 색상환이 회전하면서 각도마다 다른 색상이 되는 모습을 상상해 보세요. 각각의 반복 변형은 패턴을 바둑판으로 배열해 줄무늬나 고리를 만듭니다.

왜 Tailwind 출력은 색을 인라인하는 대신 --color-grad-* 변수를 정의하나요?#

Tailwind v4는 구성을 @theme 블록을 통해 CSS로 옮겼고, 여기서 모든 항목은 재사용 가능한 디자인 토큰이 됩니다. 각 정지점을 --color-grad-1, --color-grad-2, …로 내보내고 .bg-gradient가 var(...)로 참조하게 하면, 스니펫은 이 하나의 배경뿐 아니라 어디서든 재사용할 수 있는 팔레트(테두리, 글자, 그림자)를 줍니다. 변수 하나를 편집하면 모든 소비자가 한꺼번에 갱신됩니다. (Tailwind v3에는 @theme이 없으므로 CSS 출력을 스타일시트에 붙여넣으세요.)

부드러운 혼합 대신 단색 경계를 만들 수 있나요?#

네. 두 정지점을 같은 위치로 두세요. 예를 들어 #000 50%와 #fff 50%. 둘 사이에 거리가 없어 혼합 폭이 0이 되고 전환이 단단한 선이 됩니다. 이미지 없이 줄무늬나 띠 배경을 만드는 방법입니다.

원뿔형 그라데이션이 내 디자인 도구에 비해 회전해 보여요. 왜 그런가요?#

도구마다 원뿔형 그라데이션의 시작 각도를 다르게 측정합니다. CSS는 from 각도를 위쪽(12시 방향)에서 시계 방향으로 측정합니다. 디자인 도구가 오른쪽(3시 방향)에서 측정하거나 반시계 방향으로 측정한다면, 미리보기가 일치할 때까지 90°를 빼거나 더하거나(또는 부호를 뒤집으세요).