CSS 그라디언트 생성기 - linear·radial·conic 그라데이션 만들기

이게 뭔가요?

색 정지점을 끌어 그라데이션을 눈으로 맞추고 CSS를 그대로 복사합니다. 미리보기와 출력이 같은 값을 쓰므로 화면에 보이는 것이 곧 코드입니다.

세 가지 그라디언트

종류	색이 바뀌는 방향	주로 쓰는 곳
`linear-gradient`	직선	배경, 버튼, 히어로 영역
`radial-gradient`	중심에서 바깥으로	조명 효과, 비네팅
`conic-gradient`	중심을 축으로 회전	색상환, 원형 차트, 로딩 표시

각도 기준이 헷갈리는 이유

CSS의 각도는 수학에서 배운 것과 기준이 다릅니다.

0deg — 아래에서 위로 (↑)
90deg — 왼쪽에서 오른쪽으로 (→)
180deg — 위에서 아래로 (↓)

시계 방향으로 돕니다. 수학에서 0도는 오른쪽이고 반시계 방향으로 도는 것과 반대입니다. to right처럼 방향을 글자로 적을 수도 있는데, to right가 90deg와 같습니다.

정지점을 겹치면 줄무늬가 됩니다

두 정지점을 같은 위치에 두면 그라데이션 없이 색이 딱 나뉩니다.

/* 반반 나뉜 배경 */
background: linear-gradient(90deg, #c2703d 0%, #c2703d 50%, #e8b25f 50%, #e8b25f 100%);

이 성질로 줄무늬 패턴이나 진행 표시줄을 만들 수 있습니다.

글자에 그라데이션 넣기

배경 그라디언트를 글자 모양으로 잘라내는 방식입니다.

.gradient-text {
  background: linear-gradient(135deg, #c2703d, #e8b25f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

color: transparent가 없으면 글자색이 그라디언트를 덮어버립니다.

알아두면 좋은 것

CSS 그라디언트는 이미지가 아니라 브라우저가 그리는 것입니다. 파일 용량이 들지 않고, 어떤 크기로 늘려도 깨지지 않습니다.
정지점을 3개 이상 쓰면 색이 탁해지기 쉽습니다. 두세 개로 시작해 보세요.
두 색의 밝기 차이가 크면 가운데가 회색처럼 보이는 현상이 생깁니다. 색상환에서 가까운 색끼리 묶으면 덜합니다.
배경으로 쓸 때는 그 위에 올라갈 글자의 대비를 꼭 확인하세요. 색상 대비 검사기로 점검할 수 있습니다.

자주 묻는 질문

linear, radial, conic은 뭐가 다른가요?

linear는 직선 방향으로, radial은 중심에서 바깥으로 원형으로, conic은 중심을 축으로 각도를 돌며 색이 바뀝니다. conic은 색상환이나 원형 차트를 만들 때 씁니다.

정지점 위치를 같게 하면 어떻게 되나요?

그라데이션 없이 색이 딱 나뉘는 줄무늬가 됩니다. 두 정지점을 50%에 겹쳐두면 절반씩 다른 색으로 칠해집니다.

각도는 어느 방향 기준인가요?

0deg가 아래에서 위로, 90deg가 왼쪽에서 오른쪽입니다. 시계 방향으로 돕니다. CSS 각도는 수학의 각도와 기준이 달라 헷갈리기 쉽습니다.

텍스트에도 그라데이션을 넣을 수 있나요?

됩니다. background에 그라디언트를 넣고 background-clip과 color를 조합하면 글자에 그라데이션이 입혀집니다. 아래 본문에 코드가 있습니다.

만든 그라디언트를 이미지로 저장할 수 있나요?

이 도구는 CSS 코드만 만듭니다. CSS 그라디언트는 이미지 파일이 아니라 브라우저가 그리는 것이라 용량이 들지 않고 어떤 크기에서도 깨지지 않습니다.