CSS 그라디언트 생성기
비주얼 에디터로 CSS 그라디언트 코드를 즉시 생성하세요.
0%
100%
미리보기
CSS 코드
background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);
CSS 그라디언트란?
CSS 그라디언트는 이미지 없이 브라우저에서 직접 렌더링되는 색상 전환 효과입니다. 배경, 테두리, UI 효과 등 다양하게 활용됩니다.
CSS 그라디언트 종류
Linear Gradient (선형)
지정된 각도나 방향으로 색상이 직선으로 전환됩니다. linear-gradient()로 정의합니다.
Radial Gradient (방사형)
중심점에서 바깥으로 원형 또는 타원형으로 색상이 퍼져나갑니다. radial-gradient()로 정의합니다.
Conic Gradient (원뿔형)
파이 차트처럼 중심점을 기준으로 회전하며 색상이 전환됩니다. conic-gradient()로 정의합니다.
사용 방법
그라디언트 타입(Linear, Radial, Conic)을 선택하고, 방향이나 각도를 조절하세요. 색상 포인트를 추가·삭제하여 원하는 그라디언트를 만들고 CSS 코드를 복사하면 됩니다.
CSS 그라디언트 활용 팁
투명 효과는 rgba() 또는 8자리 hex 코드를 활용하세요. 콤마로 구분하여 여러 그라디언트를 겹쳐 사용할 수 있습니다. conic-gradient는 모든 최신 브라우저에서 지원됩니다.
자주 묻는 질문
CSS 그라디언트란 무엇인가요?
CSS 그라디언트는 이미지 파일 없이 linear-gradient(), radial-gradient(), conic-gradient() 함수로 색상 전환을 표현하는 CSS 기능입니다.
Linear과 Radial 그라디언트의 차이는 무엇인가요?
Linear는 직선 방향으로 색상이 전환되고, Radial은 중심점에서 원형 또는 타원형으로 바깥쪽으로 색상이 퍼져나갑니다.
그라디언트에 투명도를 넣으려면 어떻게 하나요?
rgba() 색상 값(예: rgba(255,0,0,0.5))이나 8자리 hex 코드(예: #ff000080)를 색상 포인트에 사용하세요.
conic-gradient는 모든 브라우저에서 작동하나요?
Chrome 69+, Firefox 83+, Safari 12.1+ 등 모든 최신 브라우저에서 지원됩니다.
한 요소에 여러 그라디언트를 겹칠 수 있나요?
가능합니다. CSS background 속성에서 콤마로 구분하여 여러 그라디언트를 한 요소에 적용할 수 있습니다.
그라디언트 텍스트는 어떻게 만드나요?
background에 그라디언트를 적용한 뒤 -webkit-background-clip: text와 color: transparent를 사용하면 텍스트에 그라디언트가 나타납니다.
색상 포인트(color stop)란 무엇인가요?
색상 포인트는 그라디언트 경로의 특정 위치(%)에서 특정 색상을 지정하는 기준점입니다.