CSS 그라데이션 생성기 — 선형·원형 배경 만들기
두 색상의 선형·원형 그라데이션을 미리 보고 CSS 복사
브라우저에서 처리 · 서버로 전송되지 않음
위치는 0~100%이며 시작 위치는 끝 위치보다 클 수 없습니다. 원형은 중앙에서 바깥쪽으로 퍼집니다.
그라데이션 CSS를 생성했습니다.
사용 방법
- 선형 또는 원형 그라데이션을 선택합니다.
- 시작 색상과 끝 색상을 색상 선택기로 고릅니다.
- 선형에서는 각도를 조절하고, 두 색상의 위치를 0~100% 범위에서 설정합니다.
- 미리보기를 확인한 뒤 CSS 코드를 복사하여 원하는 요소의 스타일에 넣습니다.
색상 위치와 방향
두 색상은 #RRGGBB 형식으로 출력됩니다. 시작 위치보다 앞쪽은 시작 색상으로, 끝 위치보다 뒤쪽은 끝 색상으로 채워지고, 두 위치 사이는 색상이 혼합됩니다. 시작 위치가 끝 위치보다 클 수는 없습니다.
선형 그라데이션은 입력한 각도로 진행합니다. 원형은 radial-gradient(circle, ...)을 사용하여 요소 중앙에서 바깥쪽으로 퍼집니다. 원형에서는 각도 입력이 사용되지 않습니다. 미리보기 요소와 실제 적용 요소의 가로세로 비율이 다르면 보이는 색상 범위도 달라질 수 있습니다.
예시
linear-gradient(90deg, #6366f1 0%, #ec4899 100%): 왼쪽에서 오른쪽으로 보라색이 분홍색으로 변합니다.- 두 색상 위치를 모두 50%로 설정하면 중앙에서 색상이 즉시 바뀌는 배경을 만듭니다.
- 원형에서 시작 위치를 25%로 올리면 중앙 색상이 더 넓은 영역을 차지합니다.
적용할 때 확인할 점
출력은 background: 단축 속성입니다. 기존 background 관련 속성을 함께 사용 중이라면 붙여 넣기 전에 그 영향을 확인하세요. 두 색상만 지원하며 투명도나 여러 단계의 색상은 별도 CSS 편집이 필요합니다. 배경 위에 글자를 넣을 때는 실제 텍스트 위치마다 충분한 명암 대비가 유지되는지 확인하세요. 모든 조정은 브라우저에서 처리됩니다.
자주 묻는 질문
각도 0도와 90도는 어느 방향인가요?
선형 그라데이션에서 0도는 아래에서 위, 90도는 왼쪽에서 오른쪽 방향입니다. 180도는 위에서 아래 방향이며, 각도가 달라지면 색상이 진행하는 방향도 바뀝니다.
시작과 끝 위치를 같게 설정하면 어떻게 되나요?
두 색상이 같은 위치에서 바로 전환되어 부드러운 혼합 대신 경계가 뚜렷한 배경이 만들어집니다.
이미지로 내려받는 기능인가요?
이 도구는 CSS background 선언을 생성합니다. 이미지 파일을 만들지 않으므로 페이지 크기가 바뀌어도 브라우저가 그라데이션을 다시 그립니다.
