CSS 그라데이션 생성기

CSS 그라데이션 생성기란?

CSS 그라데이션 생성기는 문법을 직접 손으로 쓰지 않고 시각적으로 그라데이션을 만들고 싶은 웹 디자이너와 프론트엔드 개발자를 위한 무료 브라우저 내 도구입니다. 선형, 방사형, 원뿔형(선택적 반복 변형 포함)을 고른 뒤, 드래그 가능한 미리보기 바에서 또는 HEX 색과 위치 입력란이 있는 정지점별 행에서 색 정지점을 편집합니다. 방사형 그라데이션은 원/타원 모양, 크기 키워드(closest-side, closest-corner, farthest-side, farthest-corner), at X% Y% 중심을 제공하고, 원뿔형은 시작 각도와 중심을 받습니다. 여러 그라데이션 레이어를 쉼표로 이어 하나의 배경에 쌓고, 랜덤 그라데이션을 생성하고, 엄선한 팔레트 프리셋을 적용하고, 각 정지점의 색상을 회전하고, 바로 붙여 넣을 수 있는 background 규칙을 복사할 수 있습니다.

CSS 그라데이션 생성기 사용법

1. 그라데이션 종류(선형·방사형·원뿔형)를 고르고, 반복 패턴을 원하면 옵션에서 '반복'을 켭니다.
2. 미리보기 바에서 정지점을 드래그해 위치를 바꾸고, 바의 빈 곳을 클릭해 정지점을 추가하거나, 정지점을 더블클릭해 삭제합니다.
3. 각 정지점을 HEX 색과 위치 입력란으로 미세 조정하거나, (지원 시) 스포이드로 화면에서 색을 뽑습니다.
4. 방사형은 모양(원 또는 타원), 크기 키워드, 중심 X/Y를 설정하고, 원뿔형은 시작 각도와 중심을 설정합니다.
5. 레이어를 더 추가해 그라데이션을 하나의 배경에 쌓고, '랜덤'을 시도하고, 팔레트 프리셋을 적용하거나, 모든 색상을 한 번에 회전합니다.
6. 생성된 CSS background 규칙을 복사해 스타일시트에 붙여 넣습니다.

예시

선형, 90deg, #4f86f7 0%, #9333ea 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

방사형, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

레이어 1 선형 90deg; 레이어 2 방사형 circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

자주 묻는 질문

어떤 그라데이션 종류와 옵션을 지원하나요?

선형, 방사형, 원뿔형 그라데이션이며 각각 선택적 반복 변형이 있습니다. 방사형은 원/타원 모양, 크기 키워드(closest-side, closest-corner, farthest-side, farthest-corner), at X% Y% 중심을 추가하고, 원뿔형은 시작 각도와 중심을 추가합니다. 여러 레이어를 하나의 배경에 쌓을 수도 있습니다.

드래그 가능한 정지점 바는 어떻게 동작하나요?

바 위에서 정지점을 드래그하면 위치가 바뀌고, 바의 빈 부분을 클릭하면 보간된 색으로 새 정지점이 삽입되며, 정지점을 더블클릭하면 삭제됩니다(최소 2개는 유지). 각 정지점은 바 아래에 HEX 색과 위치 입력란도 있습니다.

화면에서 색을 뽑을 수 있나요?

네, EyeDropper API를 지원하는 브라우저에서 가능합니다. 사용 가능할 때 각 정지점 옆에 스포이드 버튼이 나타나며, 클릭해 화면의 어떤 픽셀이든 고를 수 있습니다. 물론 HEX 값을 입력하거나 기본 색 칩을 써도 됩니다.

랜덤, 팔레트, 색상 회전은 무엇을 하나요?

'랜덤'은 활성 레이어를 새 랜덤 그라데이션으로 교체하고, 팔레트 프리셋은 활성 레이어의 정지점을 엄선한 배색으로 바꾸며, '색상 회전'은 모든 레이어의 모든 정지점 색상을 한 번에 옮깁니다. 모두 클릭할 때만 그라데이션을 바꿉니다.

제 색상이나 CSS가 어딘가로 업로드되나요?

아니요. 그라데이션은 로컬 문자열·색상 연산을 사용해 브라우저 안에서 완결됩니다. 어떤 색상, CSS, 설정도 서버로 전송되지 않으므로 오프라인에서도 작동하며 작업 내용이 비공개로 유지됩니다.