CSS 그라데이션 생성기

두 색상과 각도로 선형 그라데이션을 미리 보고 CSS를 생성하세요.

두 색상과 각도로 선형 그라데이션 CSS를 만들고 미리 봅니다. 결과는 background 선언 한 줄입니다.

사용 순서

시작 색상과 끝 색상을 HEX, RGB, HSL 또는 색상 이름으로 입력합니다.
각도를 도 단위로 입력합니다. 0도는 아래에서 위, 90도는 왼쪽에서 오른쪽, 180도는 위에서 아래 방향입니다.
미리보기에서 그라데이션을 확인하고 결과 복사로 background 선언을 가져갑니다.

예시

시작 #2563eb, 끝 #7c3aed, 각도 135를 입력하면 background: linear-gradient(135deg, rgb(37, 99, 235), rgb(124, 58, 237)); 선언이 나옵니다.

한계

색상은 두 개만 받으며 중간 색상 정지점, 방사형, 원뿔형 그라데이션은 만들 수 없습니다. 입력한 색은 rgb() 또는 rgba() 문자열로 바뀌어 원래 표기 형식은 남지 않습니다. 각도는 음수와 소수도 허용합니다.

보안 주의

그라데이션을 글자가 올라가는 배경으로 쓰면 구간마다 대비가 달라집니다. 글자가 가장 연한 쪽 색과 맞물리는 지점을 색상 대비 검사기로 따로 확인하세요.

배경 지식

CSS의 linear-gradient()는 시작 색상에서 끝 색상으로 직선을 따라 색이 점진적으로 섞이는 배경 이미지를 만듭니다. 각도는 색이 흘러가는 방향을 정하는 값이며, 0도는 아래에서 위, 90도는 왼쪽에서 오른쪽, 180도는 위에서 아래 방향입니다. 그라데이션은 이미지 파일 없이 CSS만으로 그려지므로 네트워크 요청이 필요 없습니다.

브라우저는 두 색의 중간값을 픽셀 단위로 계산해 그라데이션을 채웁니다. 그래서 같은 계열의 색끼리는 부드럽게 이어지지만, 보색끼리 연결하면 중간 구간이 탁한 회색처럼 보일 수 있습니다. HSL 색상환에서 가까운 두 색을 시작점으로 잡으면 결과가 안정적으로 나옵니다. 두 색의 명도 차이가 너무 크면 중간 구간이 급하게 바뀌어 보이므로, 명도도 비슷한 쪽을 고르는 것이 좋습니다.

실무에서는 버튼, 히어로 영역, 카드 배경처럼 장식 목적의 면에 주로 씁니다. 그라데이션 색을 CSS 변수로 빼 두면 브랜드 색이 바뀔 때 한 곳만 고치면 되므로 유지보수가 편해집니다. 이 도구가 만든 선언을 변수 값으로 바꿔 쓰는 방식도 같은 이유로 권장됩니다. 선언 전체를 변수에 넣고 var(--hero-bg)처럼 불러 쓰면 한 곳에서 관리할 수 있습니다.

자주 묻는 질문

그라데이션에 색을 세 개 이상 넣으려면 어떻게 하나요?

이 도구는 색상 두 개만 입력받으므로 생성된 선언을 직접 고쳐야 합니다. 두 색 사이에 중간 색을 쉼표로 넣고, 필요하면 #22c55e 50%처럼 위치를 퍼센트로 지정하면 됩니다.

투명한 색을 넣으면 결과에 어떻게 나타나나요?

입력한 색의 알파 값이 rgba() 형식으로 그대로 유지됩니다. 예를 들어 rgba(0, 0, 0, 0.5)처럼 나오며, 뒤의 배경과 섞여 보이는 효과를 만들 때 사용할 수 있습니다.

각도에 음수나 소수를 넣어도 되나요?

유한한 숫자이면 음수와 소수 모두 입력할 수 있고, 값은 그대로 deg 단위로 출력됩니다. 예를 들어 -45를 입력하면 linear-gradient(-45deg, ...) 형태가 됩니다.