CSS 그라디언트 생성기 — 선형, 원형, 원뿔형, 실시간 미리보기

그라디언트 함수를 배경 이미지로 사용하세요: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); 첫 번째 인수는 방향(각도 또는 to right 같은 키워드)이고, 그 뒤에 색상 지점이 이어지며 각 지점은 색상과 선택적인 위치로 이루어집니다. radial-gradient()는 한 점에서 퍼져 나가고, conic-gradient()는 한 점을 중심으로 돌아갑니다. 그라디언트는 이미지이므로 background-color가 아니라 background나 background-image에 넣어야 합니다.

그라디언트가 향하는 방향으로, 위쪽에서 시계 방향으로 잽니다. 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로(생략 시 기본값), 270deg는 오른쪽에서 왼쪽으로 진행합니다. 0도가 오른쪽을 가리키는 수학 관례와 다르기 때문에, 일부 디자인 도구에서 가져온 그라디언트가 회전된 채로 나오는 것입니다.

선형 그라디언트는 직선을 따라 색이 바뀝니다. 원형 그라디언트는 중심점에서 원이나 타원 모양으로 바깥쪽을 향해 색이 바뀌며, 크기 키워드(closest-side, farthest-corner 등)가 마지막 지점이 놓이는 곳을 정합니다. 원뿔형 그라디언트는 시곗바늘처럼 중심점을 돌며 색이 바뀌므로 파이 차트, 색상환, 로딩 스피너에 적합합니다.

두 지점을 같은 위치에 두면 색이 섞이지 않고 경계가 딱 떨어집니다. 그 패턴을 반복하면 됩니다. 예를 들어 repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px)는 너비 10px의 대각선 줄무늬를 만듭니다. 여기 있는 줄무늬 프리셋은 같은 작업을 퍼센트로 합니다. 반복 그라디언트에서는 첫 지점과 마지막 지점 사이의 거리가 한 번 반복되는 길이입니다.

두세 가지 색의 간단한 선형 그라디언트라면 bg-gradient-to-r from-indigo-600 to-cyan-500(Tailwind v4에서는 bg-linear-to-r) 같은 Tailwind 유틸리티를 쓰세요. 각도, 원형·원뿔형 그라디언트, 불투명도 지점 등 그 밖의 경우에는 임의 값을 사용하세요. 여기서 생성되는 bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)] 같은 클래스로, 밑줄이 공백을 대신합니다. 아주 긴 임의 값은 읽기 어려우니 테마 설정으로 옮기는 것을 고려하세요.

브라우저는 기본적으로 sRGB에서 그라디언트를 보간하는데, 채도가 높고 거의 반대인 두 색(파랑에서 노랑, 빨강에서 초록)을 잇는 직선은 채도가 빠진 회색을 지납니다. 깨끗한 중간색으로 가운데 지점을 추가하거나, 최신 브라우저에서는 지각 색 공간에서 보간하세요: linear-gradient(90deg in oklch, blue, yellow). 길고 미묘한 그라디언트의 밴딩은 8비트 색상 때문에 생기는 다른 문제로, 그라디언트 위에 약간의 노이즈 텍스처를 얹으면 가려집니다.