CSS 그라디언트 생성기

색상 스톱을 시각으로 조절해 linear·radial·conic 그라디언트를 만들고, CSS 코드를 한 번에 복사하세요.

각도 135°

컬러 스톱

CSS

타입 선택

linear(선형), radial(원형), conic(원뿔형) 중 원하는 그라디언트 유형을 선택하세요.

색상 스톱 추가

+ 버튼으로 컬러 스톱을 추가하고, 슬라이더로 위치(0–100%)를 조절합니다. 각 스톱은 색상 피커로 색을 바꿀 수 있습니다.

각도·코드 복사

linear는 각도를, radial은 모양과 위치를 조절할 수 있습니다. 결과 CSS는 한 번에 복사됩니다.

컬러 스톱은 몇 개까지?

최대 8개까지 추가할 수 있습니다. 시각적으로 의미 있는 그라디언트는 보통 2~4개로 충분합니다.

conic 그라디언트는 모든 브라우저에서 지원되나요?

Chrome 69+, Safari 12.1+, Firefox 83+에서 지원됩니다. 구형 브라우저에서는 보이지 않을 수 있습니다.

코드를 어떻게 사용하나요?

background: 속성에 그대로 붙여넣으면 됩니다. CSS 변수로 활용하거나, Tailwind의 임의 값(bg-[linear-gradient(...)])에도 사용 가능합니다.

투명도(알파)는 지원되나요?

네. 색상 피커에서 직접 16진수 8자리(#RRGGBBAA)나 rgba()를 입력해 사용할 수 있습니다.

데이터가 서버에 전송되나요?

아닙니다. 모든 작업은 브라우저에서만 이루어지며, 만들어진 CSS는 외부로 전송되지 않습니다.