사용 방법
- 선형, 방사형 또는 원뿔형을 선택한 다음 각도나 중심 위치를 설정하세요.
- 각 정지점의 색상, 불투명도, 위치를 설정하세요. 정지점은 최대 6개까지 추가하거나 필요 없는 항목을 삭제할 수 있습니다.
- 미리보기를 확인한 다음 CSS 한 줄을 복사해 스타일시트에 붙여넣으세요.
작동 방식
출력은 표준 CSS background 선언입니다. 선형 그라데이션은 각도를 따라 이어집니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 진행합니다. 방사형 그라데이션은 중심점에서 원이나 상자에 맞는 타원 형태로 퍼집니다. 원뿔형 그라데이션은 중심점에서 선택한 각도로 시작해 주변을 따라 펼쳐지며, 파이 차트와 비슷한 효과나 색상환을 만들 때 유용합니다.
색상 정지점은 위치 순서대로 표시되므로 원하는 위치로 자유롭게 드래그할 수 있습니다. 불투명도가 낮은 정지점은 rgba()로 작성되어 배경이 비쳐 보입니다. 같은 위치에 정지점 두 개를 두면 색상이 섞이지 않고 경계가 선명해집니다. 이 방식으로 줄무늬를 만들 수 있습니다.
세 가지 그라데이션 함수는 현재 모든 브라우저에서 작동합니다. 그라데이션은 기본적으로 sRGB 색 공간에서 색상을 혼합하므로 보색(예: 파란색과 노란색) 사이가 약간 회색빛으로 보일 수 있습니다. 중간에 더 밝은 색상의 정지점을 추가하면 이를 방지할 수 있습니다.
예시
은은한 헤더 배경
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%)는 위에서 아래로 은은하게 색이 바뀌어 어두운 텍스트의 가독성을 유지합니다.
경계가 선명한 줄무늬
정지점 네 개를 사용하세요: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. 50%에 있는 두 정지점이 색을 섞지 않고 맞닿아 두 개의 단색 영역을 만듭니다.
스포트라이트 효과
색상 위에 rgba(255, 255, 255, 0.6)에서 rgba(255, 255, 255, 0)로 이어지는 방사형 그라데이션(circle at top left)을 겹치면 모서리에 은은한 빛 효과를 더할 수 있습니다.
자주 묻는 질문
0deg는 어느 방향인가요?
CSS에서 0deg는 위쪽을 가리키므로 그라데이션은 아래에서 시작해 위에서 끝납니다. 90deg는 왼쪽에서 오른쪽으로 진행합니다. 일부 디자인 앱에서는 0°가 왼쪽에서 오른쪽을 의미하므로 이와 다를 수 있습니다.
텍스트에 그라데이션을 적용할 수 있나요?
네. 배경을 적용한 다음 background-clip: text와 color: transparent를 추가하세요. 그라데이션의 모든 위치에서 텍스트가 페이지 배경과 충분한 대비를 이루는지 확인하세요.
-webkit-linear-gradient 같은 벤더 접두사가 필요한가요?
아니요. 현재 브라우저는 접두사가 없는 문법을 지원합니다. 수년 전에 출시된 브라우저에서만 접두사가 필요합니다.
개인정보 보호
모든 작업은 브라우저에서 처리됩니다. 색상과 설정은 전송되거나 저장되지 않습니다.