CSS 그라데이션 생성기

이 도구에 대하여

이 CSS 그라데이션 생성기는 부드러운 색상 혼합을 시각적으로 디자인하고 바로 붙여넣을 수 있는 CSS를 한 번의 클릭으로 복사하게 해 줍니다. 선형, 방사형, 원뿔형 그라데이션을 선택하고 원하는 만큼 색상 정지점을 추가한 뒤, 네이티브 색상 선택기나 HEX 필드와 0~100퍼센트 위치로 각 정지점의 색을 세밀하게 조절하세요. 선형 그라데이션은 0~360도의 임의 각도를 설정하거나 빠른 방향 버튼을 쓸 수 있고, 방사형 그라데이션은 원 또는 타원 모양을 지원하며, 원뿔형 그라데이션은 중심점을 기준으로 색을 회전시킵니다. 큰 실시간 미리보기가 즉시 갱신되어 만들고 있는 결과를 정확히 볼 수 있습니다. 엄선된 프리셋 중 하나로 시작하고 새 아이디어가 필요하면 랜덤 버튼을 누른 다음, 생성된 background 속성을 스타일시트에 복사하세요. 모든 작업이 브라우저 안에서 로컬로 동작하므로 빠르고 비공개이며 오프라인에서도 사용할 수 있습니다.

사용 방법

1. 1 그라데이션 유형(선형, 방사형, 원뿔형)을 선택하세요.
2. 2 색상 정지점을 추가한 뒤 각 정지점의 색(선택기 또는 HEX)과 0~100% 위치를 설정하세요.
3. 3 선형과 원뿔형은 각도를, 방사형은 모양을 조절하거나 프리셋을 불러오세요.
4. 4 실시간 미리보기를 확인한 뒤 CSS 복사를 클릭해 background 속성을 프로젝트에 붙여넣으세요.

작동 원리

이 도구는 설정으로부터 표준 CSS 그라데이션 함수를 구성합니다. 선형 그라데이션은 linear-gradient(각도, 정지점)을 사용하며, 각도가 그라데이션 선의 방향을 정하고 각 색상 정지점은 색 다음에 퍼센트 위치로 작성됩니다. 방사형 그라데이션은 radial-gradient(모양 at center, 정지점)으로 가운데에서 바깥으로 색을 퍼뜨리고, 원뿔형 그라데이션은 conic-gradient(from 각도 at center, 정지점)으로 한 점을 기준으로 색을 회전시킵니다. 색상 정지점은 출력 전에 위치 기준으로 자동 정렬되므로 추가한 순서는 상관없습니다. 위치는 0~100%로 제한되고 항상 최소 두 개의 정지점이 유지되어, 생성된 CSS는 항상 유효합니다. 결과는 접두사 없이 모든 최신 브라우저에 바로 넣을 수 있는 평범한 background 선언입니다.

자주 묻는 질문

관련 도구 및 활용

그라데이션 생성기를 색상 변환기와 함께 사용해 정확한 HEX, RGB, HSL 값을 고르고, 대비 검사기와 함께 사용해 그라데이션 위에서도 텍스트가 잘 읽히는지 확인하세요. 디자이너와 개발자는 웹사이트와 앱의 히어로 배경, 버튼, 카드, 배지, 장식 효과를 만드는 데 이를 사용합니다.