그라디언트 생성기

이 도구 소개

CSS 그라데이션 생성기는 두세 가지 색으로 선형, 원형, 원뿔형 그라데이션을 만들며, 실시간 미리보기와 바로 복사할 수 있는 background CSS를 제공합니다.

사용 방법

1. 그라데이션 유형을 linear, radial, conic 중에서 고릅니다.
2. 슬라이더로 각도(0–360°)를 설정합니다.
3. 두 가지 색을 고르거나, 3색 사용을 체크해 세 번째 색을 추가합니다.
4. CSS 복사를 누르고 background 규칙을 스타일시트에 붙여 넣습니다.

알아두면 좋은 점

• linear-gradient()는 각도로 정한 직선을 따라 색을 섞으며, 90deg는 왼쪽에서 오른쪽으로 진행합니다.
• radial-gradient(circle, …)는 중심에서 바깥쪽으로 색을 퍼뜨립니다.
• conic-gradient(from <angle>, …)는 중심점을 따라 색을 회전시키며, 원형 차트나 색상환에 유용합니다.
• CSS 그라데이션은 브라우저가 그리는 이미지이므로 파일 용량을 늘리지 않고 어떤 크기로든 확대할 수 있습니다.
• 세 가지 그라데이션 함수는 현재 모든 주요 브라우저에서 지원됩니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문