CSS 그라데이션 생성기

CSS 그라데이션 생성기란?

CSS 그라데이션 생성기는 문법을 직접 손으로 쓰지 않고 빠르게 그라데이션을 만들고 싶은 웹 디자이너와 프론트엔드 개발자를 위한 무료 온라인 도구입니다. 선형, 방사형, 원뿔형 그라데이션을 고르고 선형·원뿔형에서는 각도(도)를 설정하며, 각 색 정지점에 HEX 색과 위치(%)를 지정합니다. 편집하는 동안 미리보기가 결과를 보여주고 대응하는 CSS background 규칙이 즉시 갱신되므로 스타일시트에 바로 복사해 넣을 수 있습니다. 버튼, 히어로 배경, 카드, 오버레이를 디자인하거나 linear-gradient(), radial-gradient(), conic-gradient() 함수의 동작을 익히는 데 활용하세요.

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

1. 그라데이션 종류를 선택합니다: 선형, 방사형, 원뿔형.
2. 선형 또는 원뿔형 그라데이션은 각도(0~360도)를 설정합니다. 방사형은 가운데 정렬된 원을 사용하며 각도를 무시합니다.
3. 각 색 정지점을 편집합니다: HEX 색을 입력하거나 고르고 위치를 백분율(0~100)로 설정합니다.
4. '정지점 추가'로 색을 더하거나 휴지통 아이콘으로 정지점을 삭제합니다(최소 2개는 유지됩니다).
5. 미리보기 박스가 갱신되는 것을 확인한 뒤 복사 버튼으로 생성된 CSS background 규칙을 복사합니다.

예시

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

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

방사형, 정지점 #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

자주 묻는 질문

어떤 그라데이션 종류를 지원하나요?

세 가지입니다: linear-gradient(각도를 도로 지정), radial-gradient(가운데 원), conic-gradient(시작 각도 지정). 종류 토글로 전환하면 CSS가 즉시 갱신됩니다.

색 정지점과 위치는 어떻게 동작하나요?

각 정지점은 색과 0~100의 위치(%)를 가집니다. 정지점은 목록에 나타난 순서 그대로 CSS에 기록되며 브라우저의 해석과 동일하므로 순서를 직접 제어할 수 있습니다. '정지점 추가'로 늘리고 최소 2개까지 삭제할 수 있습니다.

HEX를 입력하지 않고 색을 시각적으로 고를 수 있나요?

네. 각 정지점 옆의 작은 색 칩을 클릭하면 브라우저 기본 색상 선택기가 열립니다. 또는 #4f86f7 같은 HEX 값을 색 입력란에 직접 입력하면 됩니다. 변경에 따라 미리보기와 CSS가 갱신됩니다.

방사형 그라데이션에서 각도 입력란이 사라지는 이유는?

여기서 방사형 그라데이션은 가운데 정렬된 원으로 그려져 각도를 사용하지 않으므로, 방향을 바꾸는 선형과 원뿔형 종류에서만 각도 입력란이 표시됩니다.

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

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