이 도구에 대해
CSS 그라디언트는 히어로 배경, 버튼, 카드 등 어디에나 있지만, 문법을 손으로 쓰고 각도를 짐작하는 것은 번거롭습니다. 이 시각적 빌더로 색상 정지점을 추가·드래그하고 각도를 설정하며 선형·방사형·원뿔형 그라디언트를 전환하는 동안 결과가 실시간 미리보기를 채우는 것을 볼 수 있습니다.
괜찮아 보이면 완성된 background CSS를 스타일시트에 바로 복사하세요. 완전히 클라이언트 측이므로 마음껏 실험하세요 — 아무것도 전송되지 않습니다.
자주 묻는 질문
이 생성기가 -webkit-linear-gradient 같은 벤더 접두사를 추가하나요?
아니요. 벤더 접두사 문법은 2012년 이전의 매우 오래된 브라우저에만 필요하므로, 이 도구는 모든 최신 브라우저가 이해하는 표준 linear-gradient(), radial-gradient(), conic-gradient()만 출력합니다.
제가 만든 그라데이션이 어딘가에 업로드되거나 저장되나요?
아니요. 색상 정지점, 각도, 미리보기 모두 브라우저에서 실시간으로 생성되며 서버로 전송되는 것은 없습니다.
선형(linear), 방사형(radial), 원뿔형(conic) 그라데이션의 차이는 무엇인가요?
선형은 지정한 각도의 직선을 따라 색이 섞이고, 방사형은 중심점에서 원형으로 바깥쪽으로 퍼지며, 원뿔형은 색상환처럼 중심점을 중심으로 색이 회전하며 변합니다.
색상 정지점을 몇 개까지 추가할 수 있나요?
필요한 만큼 추가할 수 있습니다 — 'Add'를 클릭해 정지점을 추가하고, 위치 슬라이더를 드래그하며, 마지막 두 개를 제외한 어떤 정지점도 삭제할 수 있습니다.
생성된 CSS를 스타일시트에 바로 붙여넣을 수 있나요?
네. Copy를 클릭한 뒤 `background: ...;` 줄을 어떤 CSS 규칙이나 인라인 스타일에도 그대로 붙여넣으면 됩니다 — 별도 수정이 필요 없습니다.