그라데이션 생성기 — 선형·방사형·원뿔형 다색 CSS 그라데이션 (무료)
색상 정지점
최소 2개의 색상 정지점이 필요합니다.
CSS 출력
background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);관련 외부 도구
일부 링크는 제휴 링크입니다.
관련 도구
이 무료 CSS 그라데이션 생성기는 선형(linear)·방사형(radial)·원뿔형(conic) 세 가지 유형을 지원하며, 원하는 만큼 색상 정지점을 추가할 수 있습니다. 컬러 피커나 HEX 코드로 색을 선택하고 위치 슬라이더로 정밀하게 조정하면 큰 실시간 미리보기에 즉시 반영됩니다. 각도(linear)·형태/크기/중심(radial)·시작 각도/중심(conic)도 조정할 수 있습니다. 완성되면 background CSS 또는 Tailwind 값을 원클릭으로 복사하세요. 설치·가입 없이 브라우저에서 바로 사용합니다.
사용 방법
- 그라데이션 유형을 선택하세요: 선형, 방사형 또는 원뿔형.
- 색상 정지점을 편집하세요: 컬러 피커를 클릭하거나 HEX를 입력하고, 위치 슬라이더(0–100%)로 위치를 조정합니다.
- + 버튼으로 정지점을 추가(최대 10개)하고, × 버튼으로 삭제합니다. 항상 최소 2개가 유지됩니다.
- 유형별 설정을 조정하세요: 각도(선형), 형태/크기/중심(방사형), 시작 각도/중심(원뿔형).
- 프리셋에서 시작하거나 랜덤 버튼으로 탐색하고 원하는 대로 조정하세요.
- 생성된 background CSS(또는 Tailwind 값)를 원클릭으로 복사해 프로젝트에 붙여넣으세요.
그라데이션 유형
CSS에는 세 가지 그라데이션 함수가 있으며, 각각 다른 시각 효과를 냅니다. 이 도구는 세 가지를 모두 지원합니다.
선형 그라데이션 (linear-gradient)
색상이 지정한 방향(각도)으로 직선으로 변합니다. 90°는 왼쪽에서 오른쪽, 180°는 위에서 아래로 진행됩니다(CSS 규격 따름). 히어로 배경, 버튼, 카드 장식 등에 가장 많이 쓰이는 유형입니다.
방사형 그라데이션 (radial-gradient)
중심점에서 바깥쪽으로 색상이 방사상으로 퍼집니다. 원형 또는 타원형을 선택하고 크기 키워드와 중심 위치를 설정할 수 있습니다. 스포트라이트, 글로우 효과에 적합합니다.
원뿔형 그라데이션 (conic-gradient)
색상이 중심점 주변을 회전하듯 변합니다. 시작 각도와 중심 위치를 설정할 수 있습니다. 컬러 휠, 파이 차트 스타일 효과에 적합합니다. conic-gradient는 비교적 최신 CSS 기능으로 매우 오래된 브라우저에서는 지원되지 않을 수 있습니다.
기능
색상 정지점: 추가·삭제·위치 조정
+ 버튼으로 최대 10개까지 추가하고 × 버튼으로 삭제합니다. 항상 최소 2개가 유지됩니다. 위치 슬라이더(0–100%)로 각 정지점을 원하는 위치에 배치하세요. 같은 위치에 2개를 배치하면 경계가 선명한 하드 스톱이 됩니다.
각도, 형태, 중심 위치
선형은 각도 슬라이더(0–360°)로 방향을 조정합니다. 방사형은 원형/타원형 선택, 크기 키워드, X/Y 중심 위치를 설정합니다. 원뿔형은 시작 각도와 중심 위치를 추가로 설정할 수 있습니다.
컬러 피커와 HEX 입력(알파 지원)
각 정지점에 네이티브 컬러 피커와 HEX 텍스트 입력이 있습니다. 불투명도(alpha) 슬라이더를 내리면 반투명 정지점이 되고 출력이 자동으로 rgba()로 바뀝니다. 잘못된 HEX를 입력해도 다른 정지점과 미리보기는 그대로 유지됩니다.
큰 실시간 미리보기
페이지 상단의 큰 미리보기 영역에 현재 그라데이션이 즉시 반영됩니다. 어떤 설정을 편집하든 지연 없이 업데이트됩니다.
CSS 즉시 복사(background, background-image 또는 Tailwind)
출력 형식을 선택하고 복사 버튼을 클릭하세요: background: 전체 CSS, background-image: 값만, 또는 Tailwind bg-[...] 임의 값. 색상·각도·%는 항상 CSS 호환 형식입니다.
프리셋과 랜덤 생성
프리셋 견본을 클릭하면 즉시 적용됩니다. 랜덤 버튼으로 새로운 그라데이션을 탐색하세요. 두 가지 모두 창의적인 출발점으로 활용할 수 있습니다.
활용 예
히어로 배경, 버튼, 카드 그라데이션
히어로 섹션이나 CTA 버튼에 2~3색 선형 그라데이션을 설정하고 background CSS를 복사해 스타일시트에 바로 붙여넣으세요. 방사형 그라데이션은 카드 뒤의 부드러운 글로우 효과에도 좋습니다.
CSS 또는 Tailwind에 바로 붙여넣기
background: 출력을 선택해 CSS 규칙에 붙여넣으세요. Tailwind를 사용 중이라면 Tailwind 탭으로 전환해 bg-[linear-gradient(...)] 클래스를 복사해 HTML class 속성에 추가하세요.
원뿔형 그라데이션으로 컬러 휠·파이 차트 효과
원뿔형 그라데이션에 등간격으로 여러 색상 정지점을 배치하면 컬러 휠이나 파이 차트 스타일의 배경을 만들 수 있습니다. 0%, 17%, 33%, 50%, 67%, 83%에 6가지 색을 배치하면 원을 6등분한 디자인이 됩니다.
알아두면 유용한 정보
- 각도 방향: 0°는 위쪽, 90°는 왼쪽에서 오른쪽, 180°는 위에서 아래로 — CSS 규격에 따릅니다. 직관과 다를 수 있으니 미리보기로 확인하세요.
- 브라우저 지원: linear-gradient와 radial-gradient는 모든 최신 브라우저에서 지원됩니다. conic-gradient는 비교적 최신 기능으로 매우 오래된 브라우저에서는 지원되지 않을 수 있습니다.
- 위치 생략 시 균등 배분: 정지점에 위치를 지정하지 않으면 브라우저가 인접 정지점 사이에 자동으로 균등 배분합니다.
- 반투명 그라데이션: alpha를 낮추면 rgba()가 출력되며 배경색이나 이미지 위에 겹쳐 오버레이 효과를 낼 수 있습니다.
- 색상 데이터는 서버에 전송되지 않습니다. 모든 계산은 브라우저 내에서 이루어집니다.
자주 묻는 질문
- 선형뿐 아니라 방사형·원뿔형도 만들 수 있나요?
- 네. 상단 유형 선택으로 선형(linear)·방사형(radial)·원뿔형(conic) 사이를 전환하세요. 각 유형에 맞는 설정이 표시됩니다.
- 색상 정지점을 2개 이상 추가할 수 있나요?
- 네. + 버튼으로 정지점을 추가(최대 10개)하고, 각 정지점의 컬러 피커, HEX 입력, 위치 슬라이더를 사용할 수 있습니다. × 버튼으로 삭제하며 항상 최소 2개가 유지됩니다.
- 각도와 중심 위치를 변경할 수 있나요?
- 네. 각도 슬라이더로 선형 그라데이션의 방향을 조정(0–360°)합니다. X/Y 슬라이더로 방사형·원뿔형의 중심 위치를 설정합니다. 방사형은 형태와 크기 옵션도 있습니다.
- 완성된 CSS를 바로 복사해서 쓸 수 있나요?
- 네. 출력 영역에 완전한 CSS 한 줄(또는 Tailwind 클래스)이 표시됩니다. 복사 버튼을 클릭하고 프로젝트에 붙여넣으세요. 값은 항상 CSS 호환 형식입니다.
- Tailwind CSS에서 사용할 수 있나요?
- 네. Tailwind 탭으로 전환하면 bg-[...] 임의 값 클래스가 제공됩니다. HTML 요소의 class 속성에 추가하면 됩니다.
- 반투명(rgba) 그라데이션을 만들 수 있나요?
- 네. 색상 정지점의 불투명도(alpha) 슬라이더를 100% 미만으로 낮추면 해당 정지점이 rgba()로 자동 출력되어 반투명 그라데이션을 만들 수 있습니다.
- 색상 데이터가 서버로 전송되나요?
- 아니요. 그라데이션 생성, 색상 파싱, CSS 조합 등 모든 과정이 브라우저 내에서 이루어집니다. 선택한 색상과 생성된 CSS는 어디에도 전송·저장되지 않습니다.