CSS 그라데이션 생성기

기능

선형/방사형/원뿔형

여러 색상 정지점

각도 및 방향 조절

미리보기와 CSS 코드 동시 제공

사용 방법

1. 그라디언트 유형과 각도를 고르면 스테이지에 전체 크기로 미리 표시됩니다.

2. 트랙의 핸들을 드래그해 지점을 옮기고, 빈 곳을 클릭해 추가하세요(최대 6개). 색상 웰과 퍼센트 입력으로 미세 조정도 가능합니다.

3. 생성된 CSS를 복사하세요 — 체커 배경에서 투명 구간의 밴딩을 확인할 수 있습니다.

이 도구에 대하여

CSS 그라데이션은 이미지 파일 없이 부드러운 색 전환을 그려 주므로 어떤 크기에서도 선명하고 따로 내려받을 필요도 없습니다. 이 생성기는 세 가지 기본 유형을 만듭니다. 각도를 따라 변하는 linear-gradient, 중심에서 퍼져 나가는 radial-gradient, 색상환처럼 중심을 돌며 변하는 conic-gradient입니다. 트랙의 핸들을 끌어 색 정지점을 옮기고, 트랙의 빈 곳을 클릭해 정지점을 추가하며(최대 6개), 입력란으로 색과 위치를 세밀하게 조정할 수 있습니다. 무대는 결과를 전체 크기로 보여 주고, 체크무늬 배경에서는 색 띠 현상이나 뜻밖의 투명 영역을 확인할 수 있습니다. 출력은 현재 모든 브라우저에서 동작하는 표준 CSS라 background나 background-image 선언에 바로 붙여넣으면 됩니다.

자주 묻는 질문

선형, 방사형, 원추형 그라데이션은 어떻게 다른가요?

선형 그라데이션은 지정한 각도의 직선을 따라 색이 바뀝니다. 방사형 그라데이션은 중심점에서 원이나 타원으로 퍼져 나갑니다. 원추형 그라데이션은 중심점을 돌며 색이 바뀌어 원형 차트나 색상환에 유용합니다.

그라데이션 각도는 어떻게 이해하나요?

0deg는 위, 90deg는 오른쪽, 180deg는 아래, 270deg는 왼쪽을 가리킵니다. 따라서 linear-gradient(90deg, red, blue)는 왼쪽이 빨강, 오른쪽이 파랑입니다.

그라데이션에 색 띠가 보이는 이유는 무엇인가요?

비슷한 두 색을 넓은 면적에 늘이면 특히 8비트 디스플레이에서 띠가 생기기 쉽습니다. 중간 정지점을 추가하거나, 대비가 더 큰 색을 고르거나, 은은한 노이즈 질감을 더하면 도움이 됩니다.

그라데이션에 투명도를 넣을 수 있나요?

네, rgba나 8자리 HEX처럼 알파값이 있는 색을 쓰세요. 키워드 transparent로 흐려지게 하면 경우에 따라 중간이 회색빛이 될 수 있으니, 같은 색의 알파 0으로 흐려지게 하는 편이 더 깔끔합니다.

그라데이션을 글자 색이나 테두리에 쓸 수 있나요?

CSS를 조금 더하면 됩니다. 글자는 그라데이션을 배경으로 두고 background-clip: text와 투명한 글자 색을 지정합니다. 테두리는 border-image를 쓰거나 바깥 래퍼 요소에 배경을 주는 방법이 흔합니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구