CSS 그라디언트 생성기
선형 또는 방사형 그라디언트를 선택하고 각도와 색상 정지점을 설정하면 실시간 미리보기와 함께 CSS 속성이 즉시 생성됩니다.
여러 색상 stop과 위치를 편집해 CSS linear gradient 또는 원형 radial gradient를 만들고 하나의 background 선언으로 복사합니다.
CSS 그라디언트 만드는 방법
- Linear 또는 Radial을 선택합니다.
- 색상 stop을 추가·삭제하고 각 색과 0~100% 위치를 조절합니다.
- Linear에서는 각도도 조절한 뒤 생성된 background 선언을 복사합니다.
출력 규칙
출력 전에 stop을 위치 숫자 기준으로 정렬하므로 추가한 순서와 실제 CSS 순서가 다를 수 있습니다.
Linear는 `linear-gradient(각도deg, ...)`, Radial은 `radial-gradient(circle, ...)`만 생성하며 conic, repeating, ellipse, 세부 위치 옵션은 없습니다.
개인정보와 제한
편집과 미리보기는 브라우저에서 로컬로 처리됩니다. 생성 범위는 일반 linear gradient와 circle radial gradient로 제한됩니다.
CSS Gradient 자주 묻는 질문
색상 stop을 2개보다 많이 넣을 수 있나요?
네. Add Stop으로 추가할 수 있습니다.
stop 순서는 자동 정렬되나요?
네. 퍼센트 위치 기준으로 정렬해 출력합니다.
Radial에서도 각도가 적용되나요?
아니요. Radial에서는 각도 컨트롤을 숨깁니다.
Conic gradient도 되나요?
아니요. Linear와 원형 Radial만 지원합니다.
Repeating gradient를 만들 수 있나요?
아니요. 일반 non-repeating gradient만 생성합니다.