CSS 그라디언트 생성기
선형 또는 방사형 CSS 그라디언트를 시각적으로 만들고, 브라우저에서 바로 사용할 CSS를 복사하세요.
🔒 브라우저에서 로컬로 처리됩니다
Loading…
사용 방법
- 그라디언트 유형으로 선형 또는 방사형을 선택하세요. 선형인 경우 슬라이더를 드래그하거나 값을 입력해 각도(도)를 설정할 수 있습니다.
- 각 색상 스톱에는 색상 견본과 위치(0-100%)가 있습니다. 견본을 클릭해 색상을 고르거나, 위치 값을 입력해 그라디언트 내에서 해당 스톱을 이동할 수 있습니다.
- "스톱 추가"를 사용해 최대 5개까지 색상 스톱을 추가하거나, 각 스톱 옆의 "삭제"로 해당 스톱을 제거할 수 있습니다(최소 2개의 스톱이 필요합니다).
- CSS 출력 위의 미리보기 상자는 어떤 항목을 조정하든 즉시 업데이트됩니다 — 별도의 버튼을 누를 필요가 없습니다.
- 복사를 클릭하면 생성된 CSS 선언을 복사할 수 있으며, 스타일시트에 바로 붙여넣을 수 있습니다.
기능
- 각도 조절이 가능한 선형 그라디언트와 방사형 그라디언트를 모두 지원
- 최대 5개의 색상 스톱을 지원하며 각각 고유한 색상과 위치를 가짐
- 어떤 항목을 편집하든 즉시 업데이트되는 실시간 미리보기 상자
- 붙여넣기 가능한 CSS 선언을 클릭 한 번으로 복사
- 100% 클라이언트 사이드 — 그라디언트 데이터가 브라우저 밖으로 전송되지 않음
자주 묻는 질문
이 도구가 제 그라디언트 데이터를 어딘가로 전송하나요?
아니요. 그라디언트 생성과 미리보기는 모두 로컬 JavaScript와 CSS로 처리되며, 어떤 데이터도 업로드되거나 서버로 전송되지 않습니다.
색상 스톱은 몇 개까지 추가할 수 있나요?
최대 5개까지 추가할 수 있습니다. 그라디언트가 성립하려면 최소 2개의 스톱이 필요하므로, 2개까지 줄어들면 삭제 버튼이 비활성화됩니다.
각도 설정이 방사형 그라디언트에도 영향을 주나요?
아니요. 이 도구의 방사형 그라디언트는 항상 중심에서 원형으로 바깥쪽으로 퍼지므로, 각도 설정은 선형 그라디언트에만 적용됩니다.
두 스톱의 위치가 같으면 어떻게 되나요?
허용됩니다. 부드러운 혼합 대신 뚜렷한 색상 경계를 의도적으로 만드는 데 사용할 수도 있습니다 — 두 스톱 모두 생성된 CSS에 그대로 남습니다.
출력 결과를 제 CSS 파일에 바로 붙여넣을 수 있나요?
네. 출력 상자에는 완전한 `background: ...;` 선언이 표시되므로, 스타일시트나 인라인 스타일에 그대로 붙여넣어 사용할 수 있습니다.