CSS 그라디언트 생성기
고급 CSS 그라디언트를 디자인하고 코드를 복사하세요
CSS 그라디언트 생성기
CSS background-image에 사용할 수 있는 선형(linear-gradient), 방사형(radial-gradient), 원뿔형(conic-gradient) 그라디언트를 실시간 미리보기로 만들고 코드를 바로 복사할 수 있는 도구입니다. 색상 스탑은 그라디언트 바를 마우스나 터치로 드래그하거나 숫자 입력으로 0~100% 사이 위치를 정밀하게 조정할 수 있으며, 스탑은 2개 이상 원하는 만큼 추가할 수 있습니다. linear·conic 타입은 각도(0~360°)를, radial 타입은 원(circle)·타원(ellipse) 모양을 선택합니다. "반복(repeating)" 옵션을 켜면 지정한 색상 패턴이 줄무늬처럼 반복되는 repeating-linear-gradient 계열 코드가 생성됩니다. 색상 선택은 브라우저 기본 color input을 사용하므로 HEX 6자리만 지원하며 투명도(alpha) 채널은 다루지 않습니다 — rgba()가 필요하면 복사한 코드를 직접 수정하세요.
자주 묻는 질문
background와 background-image 차이?
background는 단축 속성으로 color, image, position 등을 한 번에 설정하고, background-image는 이미지만 설정합니다. 그라디언트에는 둘 다 사용 가능합니다.
repeating-linear-gradient는?
반복 그라디언트로, 색상이 지정한 크기만큼 반복됩니다. 줄무늬 패턴을 만들 때 유용합니다.
원뿔형 그라디언트(conic) 지원 브라우저는?
Chrome 69+, Firefox 83+, Safari 12.1+ 이상에서 지원됩니다.
색상 스탑 위치를 드래그할 수 있나요?
미리보기 아래의 그라디언트 바에서 스탑 핸들을 드래그하여 위치를 조정할 수 있습니다.
투명도(알파) 색상도 사용할 수 있나요?
현재 HEX 색상만 지원합니다. rgba()를 사용하려면 생성된 코드를 직접 수정하세요.
Tailwind CSS에서 사용하려면?
Tailwind v3+에서 arbitrary value 구문으로 사용: bg-[linear-gradient(135deg,#fbbf24,#ec4899)]
여러 그라디언트를 겹칠 수 있나요?
CSS에서는 쉼표로 구분하여 여러 그라디언트를 겹칠 수 있습니다. 생성된 코드를 직접 수정하세요.
SVG에서도 그라디언트를 사용할 수 있나요?
SVG는 linearGradient/radialGradient 요소를 사용하며 CSS 구문과 다릅니다. 이 도구는 CSS 전용입니다.