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