그라데이션 생성기

그라데이션 생성기란?

색상 그라데이션을 시각적으로 만들고, 여러 프레임워크에서 바로 사용할 수 있는 코드를 생성하는 도구입니다. 색상을 고르고 각도를 조정하면 CSS, Tailwind v3/v4, Flutter, SVG, React 코드를 바로 복사할 수 있습니다.

CSS 그라디언트 만드는 방법

그라데이션 유형

상단 토글로 세 가지 유형을 선택하세요:

• 선형(Linear) — 직선 방향으로 색이 전환됩니다. 각도를 조절할 수 있습니다 (0~360도).
• 원형(Radial) — 중심에서 바깥으로 원형으로 퍼집니다.
• 원뿔형(Conic) — 중심점을 기준으로 색이 회전합니다. 색상환과 비슷합니다.

각도

선형과 원뿔형 그라데이션에서 슬라이더를 드래그해 방향을 설정합니다 (0~360도).

색상 스탑

그라데이션에는 최소 2개, 최대 5개의 색상 스탑이 필요합니다.

• 컬러 피커로 색상을 선택하거나 hex 코드를 직접 입력하세요
• 위치 슬라이더로 각 색상의 시작 위치를 설정하세요 (0%~100%)
• 왼쪽 그립 아이콘을 드래그해서 스탑 순서를 변경하세요
• 색상 추가 버튼으로 스탑을 추가하세요
• X 버튼으로 스탑을 삭제하세요 (최소 2개 필수)

랜덤 생성과 초기화

• 랜덤 버튼은 색채 이론(유사색, 보색, 삼원색, 분할보색)에 기반한 조화로운 색상 조합을 생성합니다
• 초기화 버튼은 기본 2색 그라데이션으로 돌아갑니다

출력 포맷

미리보기 아래의 토글로 원하는 출력 포맷을 선택하세요:

포맷	출력	용도
CSS	background: linear-gradient(...)	일반 웹 스타일링
Tailwind v4	className="bg-linear-..."	Tailwind CSS v4 프로젝트
Tailwind v3	className="bg-gradient-to-r..."	Tailwind CSS v3 프로젝트
SVG	<linearGradient> 요소	인라인 SVG, 아이콘, 일러스트
Flutter	LinearGradient(colors: [...])	Flutter/Dart 모바일 앱
React	style={{ background: '...' }}	React 인라인 스타일

여러 포맷을 동시에 선택할 수 있습니다 — 프레임워크 간 문법 비교에 유용합니다.

공유

그라데이션 설정이 URL에 자동 저장됩니다. 도구 하단의 결과 공유 버튼을 클릭하면 링크가 복사(데스크톱)되거나 네이티브 공유 메뉴(모바일)가 열립니다. 링크를 받은 사람은 동일한 그라데이션을 볼 수 있습니다.

좋은 예시

예시 1: 깊은 바다

헤더나 히어로 섹션에 적합한 깊은 블루 그라데이션.

• 유형: 선형
• 각도: 135도
• 스탑 1: #38bdf8 (하늘색) 0%
• 스탑 2: #1e1b4b (딥 인디고) 100%

예시 2: 석양

3개 스탑을 사용한 따뜻한 멀티 컬러 그라데이션.

• 유형: 선형
• 각도: 90도
• 스탑 1: #f97316 (오렌지) 0%
• 스탑 2: #ec4899 (핑크) 50%
• 스탑 3: #8b5cf6 (바이올렛) 100%

예시 3: 원형 포커스

원형 그라데이션을 이용한 스포트라이트 효과.

• 유형: 원형
• 스탑 1: #fbbf24 (앰버) 0%
• 스탑 2: #1e1b4b (딥 인디고) 100%

공식

CSS 그라데이션은 간단한 문법을 사용합니다:

linear-gradient(각도, 색상1 위치1, 색상2 위치2, ...)

• 각도: 방향(0deg = 위, 90deg = 오른쪽, 180deg = 아래)
• 색상: CSS 색상 값 (hex, rgb, hsl, 이름)
• 위치: 색상 시작 위치, 백분율 (0%~100%)

브라우저가 각 스탑 사이의 색상을 부드럽게 보간합니다.

핵심 팁

• 심플하게. 2~3개 색상이 보통 가장 좋습니다. 색이 많으면 탁해질 수 있습니다.
• 색채 조화를 활용하세요. 랜덤 버튼이 색채 이론 기반으로 색을 생성합니다 — 영감을 얻는 데 활용하세요.
• 밝은/어두운 배경 모두 테스트하세요. 흰 배경에서 좋아 보이는 그라데이션이 다크 모드에서는 안 맞을 수 있습니다.
• 드래그로 순서를 바꿔보세요. 스탑 순서를 바꾸면 느낌이 크게 달라집니다.
• 작업을 공유하세요. URL이 자동 업데이트됩니다 — 복사해서 보내기만 하면 됩니다.

자주 묻는 질문

선형과 원형 그라데이션의 차이는?

선형 그라데이션은 지정된 각도를 따라 직선으로 색이 전환됩니다. 원형 그라데이션은 중심에서 바깥으로 원형으로 퍼집니다. 원뿔형 그라데이션은 중심점을 기준으로 파이 차트처럼 색이 회전합니다.

어떤 출력 포맷을 써야 하나요?

일반 웹 프로젝트에는 CSS를 사용하세요. Tailwind CSS를 쓴다면 프로젝트 버전에 맞는 Tailwind v4 또는 v3를 선택하세요. Flutter는 Dart 모바일 앱에, SVG는 SVG 그래픽 내부 그라데이션에 적합합니다. React는 인라인 스타일용이지만 CSS 클래스가 일반적으로 더 권장됩니다.

그라데이션을 텍스트 배경에 쓸 수 있나요?

네, CSS에서 background-clip: text와 -webkit-text-fill-color: transparent를 사용하면 그라데이션 텍스트 효과를 만들 수 있습니다. 이 생성기가 출력하는 코드 외에 추가 CSS가 필요합니다.

그라데이션이 페이지 성능에 영향을 주나요?

아닙니다. CSS 그라데이션은 브라우저의 컴포지터가 렌더링하며 성능 영향이 거의 없습니다. 배경 이미지보다 훨씬 가볍습니다.