CSS 그라데이션 생성기 — 브라우저에서 그라데이션 만들기
그라데이션을 시각적으로 디자인하고 클릭 한 번으로 CSS를 복사하세요.
이 도구는 브라우저 안에서 온전히 작동합니다. 파일은 절대 업로드되지 않으며 기기에 그대로 남습니다.
90°
Color stops
- 0%
- 100%
결과
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);그라데이션 구문을 손으로 작성하는 일은 까다롭습니다 — 백분율 하나가 틀리거나 단위 하나를 빠뜨리면 배경 전체가 망가집니다. 이 생성기는 그라데이션을 시각적으로 만들 수 있게 해 줍니다: 원하는 만큼 색상 정지점을 추가하고, 위치를 드래그하고, 선형과 방사형을 전환하면서 미리보기가 즉시 갱신되는 것을 지켜보세요.
모든 처리는 브라우저에서 실행됩니다. 가입도, 서버 왕복도, 설치할 것도 없습니다 — 설정을 바꾸는 순간 기기에서 CSS가 생성되어, 스타일시트에 바로 복사해 넣을 수 있습니다.
CSS 그라데이션 생성기 사용 방법
- 그라데이션 유형을 선택하세요 — 선형 또는 방사형.
- 선형 그라데이션의 경우 각도를 도(degree) 단위로 설정하세요.
- 각 색상 정지점을 색상 선택기와 위치 슬라이더로 조정하세요.
- 미리보기가 마음에 들 때까지 정지점을 추가하거나 제거하세요.
- "CSS 복사"를 눌러 생성된 background 규칙을 복사하세요.
자주 묻는 질문
이 도구는 어떤 CSS를 생성하나요?
표준 linear-gradient() 또는 radial-gradient() 함수를 사용하는 단일 background 속성을 출력하므로, 어떤 스타일시트나 인라인 스타일에도 바로 붙여넣을 수 있습니다.
색상 정지점을 몇 개까지 추가할 수 있나요?
필요한 만큼 추가할 수 있습니다. 모든 정지점은 자체 색상과 위치를 가지며, 추가, 편집, 제거할 때마다 그라데이션이 실시간으로 갱신됩니다.
각도가 방사형 그라데이션에도 적용되나요?
아니요. 각도는 선형 그라데이션에만 영향을 줍니다. 방사형 그라데이션은 중심에서 바깥쪽으로 퍼지므로, 방사형을 선택하면 각도 컨트롤이 숨겨집니다.
서버로 전송되는 것이 있나요?
아니요. 이 도구는 전적으로 브라우저에서 실행됩니다. 색상과 생성된 CSS는 결코 기기를 벗어나지 않습니다.