CSS 그라디언트 생성기

2개에서 5개까지의 색을 선형·원형·원뿔형 CSS 그라디언트로 만들어 보세요. 실시간 미리보기와 바로 붙여 넣는 코드, 원클릭 조화 팔레트를 함께 제공합니다.

Color stops

Position %

Palettes

Angle: 135°

Live preview

CSS

background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

이 도구는 전부 브라우저 안에서 실행됩니다. 데이터는 기기를 떠나지 않으며 어떤 서버로도 업로드되지 않습니다.

사용 방법

1색을 2~5개 지정하거나 프리셋 팔레트에서 시작합니다.
2그라디언트 종류를 고르고 각도나 형태를 조정합니다. 필요하면 정지점 위치를 고정합니다.
3CSS 코드 블록을 복사해 스타일시트에 붙여 넣습니다.

CSS 그라디언트 생성기

색을 2~5개 고르고 선형·원형·원뿔형 중 하나를 고른 뒤 각도를 끌어 보세요. 미리보기가 입력에 맞춰 즉시 갱신되고 CSS는 언제나 한 번의 복사로 가까이 있습니다. 색 정지점 위치를 비워 두면 CSS 규칙대로 자동 배치되고, 정확한 백분율을 지정하면 하드 스톱과 중심이 옮겨진 블렌딩도 만들 수 있습니다.

출력물은 실제 운영 수준의 코드 블록입니다. 아주 오래된 브라우저를 위한 단색 대비 행, 예전 WebKit 엔진을 위한 -webkit- 접두사 행, 마지막에 표준 문법이 붙습니다. 무작위 조화 버튼은 팔레트의 색상을 HSL 공간에서 회전시켜 아무리 섞어도 색 조합이 어긋나지 않게 유지합니다.

자주 묻는 질문

CSS에 -webkit- 접두사 행이 들어가는 이유는?

-webkit-linear-gradient만 이해하던 예전 WebKit 브라우저(대략 Safari 5~6 시절)를 위한 호환 행입니다. 지난 10년간의 모든 브라우저는 표준 행을 읽으므로 그 버전들을 지원할 필요가 없다면 접두사 행은 지워도 됩니다. 남기는 데는 한 줄이 들고 지우는 데는 아무 비용도 들지 않습니다.

선형 그라디언트의 각도는 무엇을 뜻하나요?

그라디언트가 흘러가는 방향으로, 위쪽을 0도로 삼아 시계 방향으로 잽니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로입니다. 도구는 입력된 각도를 정규화하고(−45는 315가 됨) 옛 문법의 반대 방향 규칙도 -webkit- 행에서 이미 처리해 둡니다.

관련 도구

생활 전체 도구 →

도구 삽입

한 줄로 사이트에 도구를 넣으세요. 방문자의 브라우저에서 실행됩니다.

<iframe src="https://zoyku.com/ko/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>

100% local processing

CSS 그라디언트 생성기

사용 방법

CSS 그라디언트 생성기

자주 묻는 질문

관련 도구

명도 대비 검사기

색상 변환기

색상 피커

이미지 테두리

도구 삽입