CSS 그라데이션 생성기: 선형 및 방사형

Gradient Generator란?

Gradient Generator는 CSS 그라데이션(선형, 방사형, 원뿔형)을 여러 컬러 스톱과 조정 가능한 파라미터로 만드는 브라우저 기반 비주얼 에디터입니다. 어떤 스타일시트에도 복사할 수 있는 프로덕션 준비 CSS를 출력합니다. 툴은 변경할 때마다 실시간으로 그라데이션 미리보기를 표시하므로 에디터와 브라우저 개발자 도구를 오가며 시행착오를 겪을 필요가 없습니다. 디자이너는 그라데이션 배경을 프로토타이핑하고 정밀한 CSS를 생성하는 데 사용하고, 개발자는 확장 가능한 에셋을 위한 SVG 그라데이션 파일을 내보내는 데 사용합니다.

주요 기능

• 선형, 방사형, 원뿔형 그라데이션 — 클릭 한 번으로 세 가지 그라데이션 타입 선택 가능. 각 타입은 올바른 CSS 함수를 출력합니다: linear-gradient(), radial-gradient(), conic-gradient().
• 위치 있는 다중 컬러 스톱 — 필요한 만큼 컬러 스톱 추가 가능. 각 스톱에는 컬러 피커, hex 입력, 0%~100% 위치 슬라이더가 있습니다. 최소 두 스톱이 필요하며, 마지막 두 개를 제거하려 하면 오류 토스트가 표시됩니다.
• 조정 가능한 그라데이션 각도 — 선형 및 원뿔형 그라데이션 타입에 대해 0°~360° 슬라이더로 각도 제어. 각도는 CSS 출력에 직접 포함됩니다.
• 실시간 CSS 코드 생성 — CSS 출력 카드는 모든 변경 시 즉시 업데이트됩니다. 출력 형식은 background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — 바로 붙여넣기 가능.
• 그라데이션 즉시 미리보기 — 툴 상단의 높이 256px 미리보기 패널이 라이브 CSS 값을 인라인 스타일로 사용해 그라데이션을 렌더링합니다.
• 클릭 한 번으로 CSS 복사 — CSS 복사 버튼이 전체 background: ...; 선언을 클립보드에 복사하고 기록에 항목을 저장합니다.
• 반복 그라데이션 지원 — 현재 별도 컨트롤로 표시되지 않지만, CSS 출력을 수동으로 편집해 linear-gradient를 repeating-linear-gradient로 교체할 수 있습니다.
• 브라우저 호환 CSS 출력 — 생성된 CSS는 모든 현대 브라우저에서 지원되는 표준 접두사 없는 구문을 사용합니다.

Gradient Generator 사용 방법

1단계: 그라데이션 타입 선택

곧 출시 예정: Gradient Generator로 이동합니다. 툴은 기본 선형 그라데이션(#8E2DE2(바이올렛) 0%에서 #33FFDD(밝은 청록) 100%, 90도)으로 열립니다.

그라데이션 타입 카드에서 세 버튼 중 하나를 클릭합니다: 선형, 방사형, 또는 원뿔형. 미리보기가 즉시 업데이트됩니다. 선형 및 원뿔형 타입에서는 타입 선택기 아래에 각도 슬라이더가 나타납니다.

2단계: 각도 설정(선형 및 원뿔형만 해당)

각도 슬라이더를 0~360도 사이로 드래그합니다. 현재 각도 값이 레이블로 표시됩니다(예: 각도: 135°). 0°는 위에서 아래로, 90°는 왼쪽에서 오른쪽으로, 180°는 아래에서 위로, 270°는 오른쪽에서 왼쪽으로 흐릅니다. 슬라이더를 움직일 때마다 미리보기가 업데이트됩니다.

방사형 그라데이션의 경우, radial-gradient(circle, ...)는 각도 파라미터를 사용하지 않으므로 각도 컨트롤이 숨겨집니다.

3단계: 컬러 스톱 구성

컬러 스톱 카드는 각 스톱을 다음 항목이 포함된 행으로 나열합니다:

• 네이티브 컬러 입력(색상 정사각형) — 클릭해 브라우저 컬러 피커 열기
• 현재 컬러 값을 표시하는 hex 텍스트 입력
• 0~100%의 위치 슬라이더
• 위치 퍼센트 레이블(예: 45%)
• 삭제 버튼(휴지통 아이콘)

컬러 입력과 hex 텍스트 입력 모두 동일한 스톱을 업데이트합니다. 어느 쪽을 변경해도 미리보기가 즉시 새로고침됩니다.

스톱 추가를 클릭해 흰색 기본 컬러로 임의의 위치에 새 컬러 스톱을 삽입합니다. 필요한 위치에 배치하려면 컬러와 위치를 편집합니다.

4단계: 컬러 스톱 제거

아무 스톱 행의 휴지통 아이콘을 클릭해 삭제합니다. 스톱이 두 개만 남은 경우, 삭제 클릭 시 "최소 컬러 스톱 2개 필요"라는 오류 메시지가 토스트로 표시되고 두 스톱 모두 유지됩니다.

5단계: CSS 출력 복사

CSS 출력 카드에 전체 선언이 표시됩니다:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

CSS 복사를 클릭해 이 문자열을 클립보드에 복사합니다. 성공 토스트가 복사를 확인합니다. 항목은 기록 패널(서포터 계정용)에 그라데이션 타입, 각도, CSS 값과 함께 기록됩니다.

6단계: SVG로 내보내기(서포터 기능)

SVG 버튼(다운로드 아이콘 포함)을 클릭해 그라데이션을 SVG 파일로 내보냅니다. 선형 그라데이션의 경우 SVG는 gradientTransform="rotate(angle, 0.5, 0.5)" 속성이 있는 <linearGradient> 요소를 사용합니다. 방사형 그라데이션의 경우 <radialGradient>를 사용합니다. 파일은 gradient.svg로 다운로드됩니다. 이것은 프리미엄 서포터 기능입니다.

7단계: 무작위화 또는 초기화

두 개의 무작위 컬러와 무작위 각도로 새 그라데이션을 생성하려면 무작위화(원형 화살표 아이콘)를 클릭합니다. 그라데이션을 기본 바이올렛에서 청록 선형 그라데이션 90°로 초기화하려면 지우기를 클릭합니다.

실용적인 예제

히어로 섹션 배경 그라데이션

랜딩 페이지 히어로에 #667EEA(미디엄 블루-바이올렛)에서 #764BA2(딥 퍼플)로의 135° 대각선 그라데이션을 원하는 경우. 타입을 선형으로 설정하고, 각도 슬라이더를 135로 드래그하고, 스톱 1을 0%의 #667EEA로, 스톱 2를 100%의 #764BA2로 변경합니다. CSS 복사를 클릭하고 붙여넣습니다:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

방사형 스포트라이트 효과

카드 중앙을 조명하는 방사형 그라데이션을 원하는 경우. 타입을 방사형으로 설정합니다. 스톱 1을 0%의 #FFFFFF로 변경하고, 50%에 #F1F5F9의 세 번째 스톱을 추가하고, 스톱 2(현재 스톱 3)를 100%의 #CBD5E1로 설정합니다. 출력:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

흰색 카드 표면에 미묘한 깊이 효과로 사용합니다.

원뿔형 색상환 미리보기

타입을 원뿔형으로, 각도를 0°로 설정합니다. 균등하게 6개의 스톱을 추가합니다: 빨간색(#FF0000) 0%, 노란색(#FFFF00) 17%, 녹색(#00FF00) 33%, 시안(#00FFFF) 50%, 파란색(#0000FF) 67%, 마젠타(#FF00FF) 83%. 마지막 스톱은 자연스럽게 빨간색으로 돌아갑니다. SVG로 내보내어 색채 이론 다이어그램에서 색상환을 사용합니다.

팁 및 모범 사례

컬러 스톱은 CSS 생성 전에 위치별로 정렬됩니다. 어떤 순서로든 스톱을 추가할 수 있습니다 — 툴은 항상 출력을 작성하기 전에 오름차순으로 정렬합니다. 슬라이더에서 0% 스톱을 50% 스톱 너머로 드래그하면 CSS가 올바르게 재정렬됩니다.

창의적인 출발점으로 무작위화 버튼 사용. 무작위화기는 두 개의 무작위 hex 컬러와 무작위 각도를 생성합니다. 다듬을 가치 있는 팔레트를 찾을 때까지 반복 클릭한 후 컬러를 수동으로 조정합니다.

기존 그라데이션을 리버스 엔지니어링하려면 붙여넣기. 툴은 아직 CSS 그라데이션 문자열 직접 붙여넣기를 지원하지 않습니다. 그러나 기존 그라데이션에서 컬러 스톱 값을 추출해 수동으로 입력할 수 있습니다.

공유 가능한 URL은 모든 그라데이션 파라미터를 인코딩합니다. 그라데이션 타입, 각도, 컬러 스톱(컴팩트한 color:position 문자열로)이 페이지 URL에 직렬화됩니다. URL을 복사해 팀원과 정확한 그라데이션 구성을 공유하세요.

SVG 내보내기는 400×200px 캔버스를 사용합니다. 내보낸 gradient.svg에는 width="400" height="200"과 그라데이션으로 전체 캔버스를 채우는 <rect> 요소가 있습니다. SVG는 해상도 독립적이므로 자유롭게 확장할 수 있습니다.

최소 두 스톱은 토스트 메시지로 적용됩니다. 두 개만 남았을 때 스톱을 삭제하려 하면 오류 토스트가 "최소 컬러 스톱 2개 필요"라고 표시됩니다 — 그라데이션에는 유효한 CSS가 되려면 최소 두 개의 스톱이 필요합니다.

일반적인 문제 및 문제 해결

CSS 출력에 background: ;(빈 그라데이션)가 표시됩니다. 정상 사용 시 발생하지 않아야 합니다. 컬러 스톱 배열이 어떻게든 비어 있는 경우(URL 상태 손상으로만 가능), generateCss 함수는 빈 문자열을 반환합니다. 초기화 버튼으로 툴을 지우거나 페이지를 새로고침해 기본 상태를 복원합니다.

컬러 스톱 hex 입력이 입력 후 잘못된 컬러를 표시합니다. hex 입력은 스톱의 컬러 값에 직접 연결됩니다. 잘못된 hex(예: #ZZZZZZ)를 입력하면 컬러 피커 입력이 업데이트되지 않고 이전 유효한 컬러가 표시될 수 있습니다. hex를 유효한 6자리 값으로 수정합니다.

위치 슬라이더를 정밀하게 배치하기 어렵습니다. 슬라이더는 1% 단위로 값을 받습니다. 정밀한 배치를 위해 퍼센트를 직접 입력하세요 — 그러나 현재 UI는 슬라이더만 사용합니다. 가까운 반올림 숫자를 사용하고 CSS 출력에서 확인합니다.

방사형 그라데이션이 중심에서 벗어난 것처럼 보입니다. 생성된 방사형 그라데이션은 기본적으로 50% 50%에 중심을 두는 radial-gradient(circle, ...)를 사용합니다. circle at X% Y% 추가는 UI에서 아직 불가합니다. 중심을 재배치하려면 스타일시트에서 복사한 CSS를 수동으로 편집합니다.

SVG 내보내기가 선형 또는 방사형만 표시합니다. SVG 내보내기 함수는 선형 그라데이션을 <linearGradient>로 처리하고 기타 모든 타입(원뿔형 포함)을 <radialGradient>로 처리합니다. 원뿔형 그라데이션에는 SVG 동등물이 없어 SVG 내보내기에서 방사형으로 폴백합니다.

기록 복원이 상태를 부분적으로만 복원합니다. 기록 복원 함수는 저장된 기록 항목 텍스트에서 그라데이션 타입과 각도를 파싱합니다. 기록에서 컬러 스톱을 복원하지 않습니다(컬러 스톱은 공유 가능한 URL 상태에 보존됩니다). 전체 상태 복원에는 공유 URL을 사용합니다.

개인정보 보호 및 보안

Gradient Generator는 완전히 브라우저에서 실행됩니다. CSS 생성, 컬러 스톱 관리, SVG 내보내기 로직은 모두 순수 JavaScript입니다. 그라데이션 구성, 컬러 값 또는 사용 데이터는 외부 서버로 전송되지 않습니다. SVG 내보내기는 로컬 파일을 쓰기 위해 downloadText를 사용합니다 — 업로드가 발생하지 않습니다. 툴은 페이지 로드 후 완전히 오프라인으로 작동하며, 독점 또는 미공개 디자인 에셋에 사용해도 안전합니다.

자주 묻는 질문

Gradient Generator는 무료인가요?

예. 모든 핵심 기능(선형, 방사형, 원뿔형 그라데이션 생성, 다중 컬러 스톱, 각도 제어, CSS 복사, 무작위화)은 계정 없이 무료입니다. SVG 내보내기 버튼은 Ko-fi 서포터 구독이 필요한 프리미엄 서포터 기능입니다.

Gradient Generator는 오프라인으로 작동하나요?

예. 페이지가 로드되면 모든 그라데이션 생성, 미리보기 렌더링, CSS 출력이 인터넷 없이 작동합니다. 온라인에 의존하는 유일한 기능은 초기 페이지 로드와 공유 URL인데, 공유 URL은 URL 자체에 상태를 인코딩합니다(상태를 읽으려면 서버 호출이 필요 없음).

Gradient Generator에서 내 데이터는 안전한가요?

예. 그라데이션 파라미터나 컬러 값이 서버에 전송되지 않습니다. 툴에는 그라데이션 생성을 위한 백엔드가 없습니다. 디자인은 완전히 기기에 남아 있습니다. 공유 가능한 URL은 URL 문자열 자체에 상태를 인코딩합니다 — 서버에 저장되지 않습니다.

툴이 지원하는 CSS 그라데이션 타입은 무엇인가요?

툴은 세 가지 CSS 그라데이션 타입을 지원합니다: linear-gradient(), radial-gradient(), conic-gradient(). CSS 출력은 표준 접두사 없는 구문을 사용합니다. 브라우저 지원의 경우, linear-gradient와 radial-gradient는 모든 현대 브라우저에서 작동합니다; conic-gradient는 Chrome 69+, Safari 12.1+, Firefox 83+가 필요합니다.

다중 스톱 그라데이션을 어떻게 만드나요?

추가 컬러 스톱을 삽입하려면 스톱 추가를 클릭합니다. 각 새 스톱은 기본 컬러 흰색으로 임의의 위치에 나타납니다. 컬러 스워치를 클릭하거나 hex 값을 입력해 컬러를 설정한 다음 위치 슬라이더를 드래그해 배치합니다. 스톱 수에 상한이 없습니다.

컬러 스톱을 제거할 수 있나요?

예. 아무 스톱 행의 휴지통 아이콘을 클릭합니다. 두 개만 남은 경우, 툴이 제거를 방지하고 토스트를 표시합니다: "최소 컬러 스톱 2개 필요." 유효한 CSS 그라데이션에는 최소 두 개의 컬러 스톱이 필요합니다.

내보낸 SVG 파일에는 무엇이 들어 있나요?

SVG 내보내기는 <linearGradient>(선형 타입용) 또는 <radialGradient>(방사형 및 원뿔형 타입용)가 있는 <defs> 블록과 그 그라데이션으로 전체 캔버스를 채우는 <rect> 요소가 포함된 400×200px 파일을 생성합니다. 파일 이름은 gradient.svg이며 자동으로 다운로드됩니다.

생성된 CSS를 Tailwind CSS에서 사용할 수 있나요?

예. linear-gradient(...) 값(background: 접두사 없이)을 Tailwind 구성에 커스텀 배경 이미지로 붙여넣습니다:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

그런 다음 HTML에서 bg-brand-gradient로 사용합니다.

툴이 투명한 컬러 스톱을 지원하나요?

컬러 입력은 불투명한 hex 값(6자리)만 허용합니다. 투명도가 있는 그라데이션을 만들려면 CSS 출력을 복사하고 스타일시트에서 스톱 컬러를 rgba() 표기법으로 수동으로 수정합니다. 예: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

그라데이션을 누군가와 공유하려면 어떻게 하나요?

그라데이션을 구성한 후 브라우저 주소 표시줄에서 URL을 복사합니다. URL은 그라데이션 타입, 각도, 모든 컬러 스톱 값을 인코딩합니다. 다른 기기에서 해당 URL을 열면 정확히 같은 그라데이션이 로드됩니다. 페이지 하단의 공유 버튼을 사용해 Twitter, LinkedIn, Reddit에 게시하거나 링크를 직접 복사할 수도 있습니다.

관련 도구

• 곧 출시 예정: UI Gradients — 선별된 이름 있는 그라데이션 라이브러리를 탐색하고 CSS 값을 직접 복사.
• Color Picker — 그라데이션 스톱으로 추가하기 전에 EyeDropper 또는 형식 입력으로 정확한 hex 컬러 찾기.
• 곧 출시 예정: Color Blender — 두 값 사이의 부드러운 중간 컬러 생성. 다중 스톱 그라데이션 수동 계획에 유용.
• 곧 출시 예정: Palette Generator — 그라데이션 스톱 소스로 사용할 조화로운 컬러 팔레트 생성.

지금 Gradient Generator를 사용해 보세요: 곧 출시 예정: Glyph Widgets Gradient Generator