그라디언트 → CSS이란?
여러 색상 정지점이 있는 선형, 방사형, 원뿔형 그라디언트를 디자인하고 CSS 코드를 복사할 수 있는 시각적 그라디언트 빌더입니다. 라이브 미리보기로 각도, 위치, 색상을 조정하세요.
라이브 바 위에서 컬러 스톱을 드래그하면 선형, 방사형, 원뿔형 그라데이션을 만들 수 있고 미리보기는 실시간으로 갱신됩니다. 기존 CSS 그라데이션을 붙여넣어 곧바로 편집하거나, Sunset/Aurora/Rainbow 같은 프리셋을 골라 각도만 조정한 뒤 구문을 복사하면 됩니다. 출력은 벤더 프리픽스 없는 순수 CSS이며 JavaScript도 필요 없습니다.
사용 방법
- 그래디언트 유형(선형, 방사형 또는 원뿔형)을 선택하고 방향 또는 각도를 설정하세요.
- 그래디언트 바를 클릭하거나 색상 선택기를 사용하여 색상 정지점을 추가, 제거 또는 조정하세요.
- 생성된 CSS 코드를 복사하여 스타일시트에 바로 사용하세요.
사용 시기
- 히어로 섹션 배경에서 컬러 스톱 위치와 각도를 정확히 잡고 싶을 때.
- 스타일시트에 이미 있는 그라데이션을 붙여 시각적으로 수정한 뒤 다시 복사할 때.
- 파이 차트 스타일 배경이나 무지개 로더용 원뿔 그라데이션(conic-gradient)을 만들 때.
결과
석양 그라디언트를 시도해 보세요: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — 히어로 섹션 배경으로 좋습니다.
자주 묻는 질문
- linear, radial, conic 그라데이션은 무엇이 다른가요?
- linear는 직선 방향으로 색을 깔고, radial은 중심에서 동심원 형태로 퍼져 나가며, conic은 파이 차트처럼 중심을 한 바퀴 돕니다. 세 유형 모두 같은 컬러 스톱 문법을 씁니다.
- 이미 작성한 CSS 그라데이션을 어떻게 가져오나요?
- 전체 선언을 Import 입력란에 붙입니다. 예: background: linear-gradient(135deg, #ff6b35, #f72585);. Import 버튼을 누르면 각도, 스톱, 유형이 파싱되어 비주얼 에디터에 자동 반영됩니다.
- 어떤 화면에서는 띠 모양(밴딩)이 보이는데 왜 그런가요?
- 인접한 스톱의 색상 차이가 크고 디스플레이가 8비트 컬러일 때 밴딩이 나타납니다. 중간 스톱을 추가하거나 각도 범위를 줄이면 완화됩니다. HDR 렌더링이 가능한 브라우저에서는 밴딩이 훨씬 적습니다.
- 이 결과를 background-image로 사용할 수 있나요?
- 가능합니다. 복사된 문자열은 background, background-image뿐 아니라 이미지를 받아들이는 모든 CSS 속성에 쓸 수 있습니다. border-image, mask, 그리고 최신 브라우저의 SVG fill에도 사용 가능합니다.
- 출력에 -webkit- 같은 프리픽스가 들어가나요?
- 들어가지 않습니다. 2017년 이후 주요 에버그린 브라우저는 linear/radial/conic 모두 프리픽스 없이 동작합니다. 지금 프리픽스를 더해도 스타일시트만 무거워질 뿐입니다.