CSS 그라디언트 생성기
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 최종 업데이트: 2026년 · 무료 온라인 도구
CSS 그라디언트 생성기란?
시각적 에디터로 CSS 그라디언트를 만들고 코드를 복사하는 무료 온라인 도구
사용 방법
- 1 타입 선택 — 그라데이션 타입(linear, radial, conic)을 선택합니다.
- 2 색상 정지점 조정 — 색상 정지점의 색상과 위치를 조정합니다.
- 3 미리보기 확인 — 미리보기에서 실시간으로 결과를 확인합니다.
- 4 CSS 코드 복사 — '복사' 버튼으로 CSS 코드를 클립보드에 복사합니다.
관련 도구
자주 묻는 질문
제한은 없지만, 2~6개가 일반적입니다. 너무 많으면 성능에 영향이 있을 수 있습니다.
네. '반복' 체크박스를 활성화하면 repeating 접두사가 추가됩니다.
Sunset, Ocean, Forest, Midnight, Rainbow 등 5가지 프리셋을 제공합니다.
현재는 순수 CSS만 출력합니다. Tailwind 변환은 향후 추가 예정입니다.
아니요. 모든 처리는 브라우저에서 이루어집니다.