CSS 그라데이션 생성기
최대 5개의 색상 정지점을 사용하여 선형 또는 방사형 CSS 그라데이션을 만들고 바로 붙여넣을 수 있는 배경 선언을 복사하세요.
생성된 그라데이션
background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);
이용 방법
CSS 그라데이션 생성기는 linear-gradient() 또는 radial-gradient() 값을 시각적으로 생성하므로, 구문을 직접 추정하지 않고 실시간 미리보기로 색상과 위치를 선택할 수 있습니다.
- 선형 또는 방사형 선택
선형은 각도를 따르며, 방사형은 중심에서 바깥쪽으로 퍼집니다.
- 각도 및 정지점 설정
각도 슬라이더를 드래그한 다음 각 정지점의 색상과 위치를 0~100% 범위에서 설정하세요.
- CSS 복사
배경 선언이 실시간으로 업데이트되며 한 번의 클릭으로 복사됩니다.
생성된 CSS 사용
복사한 줄을 블록 요소의 background 또는 background-image 속성에 붙여넣으세요:
.hero { background: linear-gradient(to bottom, #0f172a 0%, #1e3a5f 60%, #0f172a 100%); }
그라데이션은 color나 border-color에 직접 적용할 수 없습니다. 텍스트 그라데이션을 만들려면 텍스트 요소에 그라데이션을 배경으로 적용한 후 background-clip: text와 color: transparent를 추가하세요.
선형과 방사형
- 선형: 색상 정지점이 선택한 각도의 직선을 따라 이동합니다. 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽, 270deg는 왼쪽을 가리킵니다.
- 방사형: 색상 정지점이 중심에서 바깥쪽으로 원형을 그리며 퍼집니다. 이 도구는 항상 방사형 그라데이션을 중앙에 배치합니다. 중심이 어긋나거나 타원형인 방사형 그라데이션이 필요하면 생성된 값을 수동으로 편집하여 위치 또는 모양 키워드를 추가하세요.
브라우저 지원
linear-gradient()와 radial-gradient()는 모든 최신 브라우저에서 벤더 접두사 없이 작동합니다. -webkit-linear-gradient()와 같은 이전 접두사 형식은 더 이상 필요하지 않습니다.
이 도구에서 지원하지 않는 기능
원뿔형 그라데이션(conic-gradient())과 하나의 요소에 여러 겹의 그라데이션을 적용하는 기능은 여기서 생성되지 않습니다. 둘 다 유효한 CSS이므로 기본 그라데이션을 만든 후 수동으로 추가할 수 있습니다.
자주 묻는 질문
여러 색상 정지점이 있는 CSS 그라데이션을 어떻게 생성하나요?
색상 정지점 추가 버튼으로 색상 정지점을 추가한 다음 각각의 16진수 색상 값과 퍼센트 위치를 설정하세요. 입력하는 동안 미리보기와 그 아래 CSS 줄이 자동으로 업데이트됩니다. CSS 복사를 클릭하면 전체 선언을 얻을 수 있습니다. 예: background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);
생성된 그라데이션을 어떤 CSS 속성에 붙여넣어야 하나요?
모든 블록 요소에 background 또는 background-image 속성을 사용하세요. 그라데이션은 color나 border-color에 직접 적용할 수 없으며, 텍스트에 그라데이션을 적용하려면 텍스트 요소에 background-clip: text와 color: transparent를 함께 설정해야 합니다.
CSS에서 대각선 방향의 그라데이션을 만들려면 어떻게 해야 하나요?
각도를 축 사이의 값으로 설정하세요. 예를 들어 45는 왼쪽 위에서 오른쪽 아래 방향이고, 135는 오른쪽 위에서 왼쪽 아래 방향입니다. 0은 바로 위, 90은 바로 오른쪽, 180은 바로 아래, 270은 바로 왼쪽을 가리킵니다.
CSS 그라데이션에 색상 정지점을 두 개보다 많이 추가할 수 있나요?
네, 이 도구는 최대 5개의 정지점을 지원합니다. '색상 정지점 추가'를 클릭하면 마지막 두 정지점의 중간 지점에 새 정지점이 추가되며, 이후 색상과 위치를 조정하세요. 정지점이 세 개 이상일 때는 각 정지점마다 제거 버튼이 표시됩니다.
이 도구에서 방사형 그라데이션을 지원하나요?
네. 유형을 '방사형'으로 전환하면 linear-gradient() 대신 radial-gradient()가 생성됩니다. 방사형 그라데이션은 항상 중앙에 배치되며 모든 방향으로 균일하게 퍼지므로 각도 설정이 없습니다. 원뿔형 그라데이션은 지원하지 않으며 직접 코드를 작성해야 합니다.