CSS 그라데이션 생성기 | 선형·방사형·코드 복사
선형/방사형 그라데이션을 만들고 CSS·Tailwind·PNG로 내보내세요. 한국어 UI로 바로 사용 가능합니다.
선형·방사형 그라데이션을 직접 만들고 색상 스톱, 각도, 크기를 세밀하게 조정하세요. 프리셋 팔레트를 선택하거나 원하는 조합을 만든 뒤 CSS 또는 Tailwind 클래스를 복사해 바로 적용할 수 있습니다. 고해상도 PNG로 내보내면 히어로 배경, 배너, UI 그래픽 제작도 손쉽습니다. 모든 작업은 브라우저에서 처리되어 빠르고 안전합니다.
컨트롤
Presets
0°90°180°270°360°
이미지 크기
편집 시 정렬에 도움이 됩니다. 내보낸 이미지는 항상 보이는 색상과 일치합니다.
내보내기
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]실시간 미리보기
1920×1080
색상 정지
0%50%100%
Edit Color Stop
사용 방법
- • 타임라인에서 색상 정지점을 드래그하여 위치를 조정합니다.
- • 정점을 클릭하여 선택하고 색상을 편집합니다.
- • 빠른 색상 구성표를 위해 사전 설정 팔레트에서 선택합니다.
- • 컨트롤에서 그라데이션 각도 또는 모양을 조정합니다.
- • PNG 이미지로 내보내거나 CSS/Tailwind 코드를 복사합니다.