DevTulz Online

CSS 그라디언트 생성기

색상 중지점

CSS 그라디언트란?

CSS 그라디언트를 사용하면 이미지 파일 없이 두 가지 이상의 색상 사이에서 부드러운 전환을 표시할 수 있습니다. 세 가지 유형이 있습니다: linear-gradient (직선 방향), radial-gradient (중심점에서 방사형), conic-gradient (중심점을 기준으로 회전). 그라디언트는 배경, 버튼, 오버레이, 장식 요소에 사용됩니다.

CSS 그라디언트 생성기 사용 방법

  1. 견본에서 프리셋을 선택하거나 직접 그라디언트를 구성하세요.

  2. 그라디언트 유형을 선택하세요: linear, radial 또는 conic.

  3. 각도(linear/conic용) 또는 모양(radial용)을 조정하세요.

  4. 색상 중지점을 편집하세요 — 색상과 위치(0–100%)를 변경합니다.

  5. 필요에 따라 색상 중지점을 추가하거나 제거하세요.

  6. CSS를 복사하여 스타일시트에 붙여넣으세요.

자주 묻는 질문

투명한 그래디언트를 어떻게 만들나요? 완전한 투명성을 위해 알파 채널이 0인 rgba() 또는 hsla() 색상 값을 사용하세요. 예를 들어, rgba(0,0,0,0)의 색상 정지점은 완전히 투명한 검은색이며, 이미지의 페이드 아웃 오버레이에 유용합니다.

하드 컬러 스탑(전환 없음)을 어떻게 만들나요? 같은 위치에 두 개의 색상 정지점을 배치하세요 — 하나는 끝나고 하나는 그 지점에서 시작합니다. 예를 들어, 빨강 50%, 파랑 50%는 중간점에서 그래디언트 전환 없이 빨강에서 파랑으로 즉시 전환합니다.

어떤 브라우저가 원뿔형 그래디언트를 지원하나요? 원뿔형 그래디언트는 모든 최신 브라우저(Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+)에서 지원됩니다. Internet Explorer에서는 지원되지 않습니다.

같은 요소에 여러 그래디언트를 사용할 수 있나요? 네. CSS background는 쉼표로 구분된 레이어 목록을 허용합니다. 그래디언트를 쌓고, 배경 이미지와 결합하고, 각 레이어의 위치와 크기를 독립적으로 제어할 수 있습니다.

Keywords: CSS 그라디언트 생성기, 선형 그라디언트, 방사형 그라디언트, 원뿔형 그라디언트, CSS 배경 생성기, 그라디언트 색상 선택기, CSS 그라디언트 도구