Developer · Instrument
CSS 그라디언트 생성기
고급 CSS 그라디언트를 디자인하고 코드를 복사하세요
CSS
Linear
Radial
Conic
135°
CSS 그라디언트 생성기
CSS background-image에 사용할 수 있는 선형(linear-gradient), 방사형(radial-gradient), 원뿔형(conic-gradient), 반복 그라디언트를 시각적으로 만들고 CSS 코드를 바로 복사할 수 있습니다. 색상 스탑 위치를 정밀하게 조정하고, 각도와 반복 옵션을 설정하여 원하는 배경을 만드세요.
자주 묻는 질문
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 전용입니다.