색상 중지점
CSS 출력
프리셋
테마를 클릭하여 사전 설정된 그라데이션을 즉시 불러오세요.
작동 원리 및 CSS 구문
이 도구는 그라데이션 함수를 사용하여 표준 CSS `background-image` 속성을 시각적으로 구성합니다. 색상을 추가하고 위치를 변경함에 따라 생성기는 현대 브라우저에 필요한 정확한 구문을 계산합니다.
선형 그라데이션 (Linear Gradients)
선형 그라데이션은 직선을 따라 색상을 전환합니다. 구문은 다음과 같습니다:
linear-gradient(angle, color1 position1, color2 position2, ...)
각도(angle)는 방향을 결정합니다(예: 90deg는 왼쪽에서 오른쪽으로). 위치(position)는 색상이 가장 순수한 형태에 도달하는 지점(0%에서 100%)을 결정합니다.
원형 그라데이션 (Radial Gradients)
원형 그라데이션은 중심점에서 바깥쪽으로 색상을 전환합니다. 구문은 다음과 같습니다:
radial-gradient(shape at position, color1 pos1, color2 pos2, ...)
모양(shape)은 circle(원) 또는 ellipse(타원)일 수 있습니다. 이 도구는 기본 위치를 요소의 center(중심)로 설정합니다.
원뿔형 그라데이션 (Conic Gradients)
원뿔형 그라데이션은 파이 차트처럼 중심점을 기준으로 회전하며 색상을 전환합니다. 구문은 다음과 같습니다:
conic-gradient(from angle at center, color1 pos1, color2 pos2, ...)
원뿔형 그라데이션은 색상 휠, 파이 차트 및 복잡한 각도 패턴을 만드는 데 탁월합니다.