CSS 그라데이션 만드는 법 — linear·radial·conic

웹 페이지의 배경이나 버튼에 부드럽게 번지는 색을 넣고 싶을 때 가장 많이 쓰는 기법이 바로 CSS 그라데이션입니다. 이미지 파일을 따로 만들지 않아도 코드 몇 줄로 색이 자연스럽게 이어지는 면을 만들 수 있어서, 로딩 속도와 화질 모두에서 유리합니다. 문법이 처음엔 낯설어 보이지만 방향과 색만 이해하면 금방 손에 익습니다. 직접 색을 골라 가며 코드를 바로 뽑아 보고 싶다면 CSS 그라데이션 생성기를 함께 사용하면 편합니다. 이 글에서는 linear-gradient, radial-gradient, conic-gradient 세 가지 함수의 문법과 색 정지점(color stop) 지정법을 예시 코드로 정리합니다.

한눈에 보기

• CSS 그라데이션은 background(또는 background-image) 속성에 함수 형태로 지정합니다.
• linear-gradient는 직선 방향으로, radial-gradient는 중심에서 바깥으로, conic-gradient는 각도를 따라 색이 번집니다.
• 방향은 각도(0deg=위쪽, 90deg=오른쪽) 또는 to right·to bottom right 같은 키워드로 지정합니다.
• 색 정지점으로 각 색이 놓이는 위치를 퍼센트나 길이로 정할 수 있습니다.
• 색을 비슷한 명도로 맞추면 더 자연스러운 결과를 얻습니다.

그라데이션이란

그라데이션은 둘 이상의 색이 경계 없이 서서히 섞여 가는 표현입니다. CSS에서는 이를 하나의 이미지처럼 다루기 때문에 background-color가 아니라 background 또는 background-image 속성에 함수로 넣습니다. 예를 들어 아래 코드는 빨강에서 파랑으로 이어지는 배경을 만듭니다.

.box {
  background: linear-gradient(90deg, #ff0000, #0000ff);
}

색은 두 개만 쓸 수도 있고 여러 개를 나열할 수도 있습니다. 색과 색 사이는 쉼표(,)로 구분합니다.

linear-gradient

linear-gradient는 가장 기본이 되는 직선형 그라데이션입니다. 문법은 linear-gradient(방향, 색1, 색2, …) 형태이며, 첫 인자에 방향을 적습니다.

• 각도 방식: 0deg는 위쪽, 90deg는 오른쪽 방향으로 색이 흐릅니다. 45deg처럼 대각선도 가능합니다.
• 키워드 방식: to right(오른쪽), to bottom(아래쪽), to bottom right(오른쪽 아래)처럼 적습니다.

.banner {
  background: linear-gradient(to right, #ffafbd, #ffc3a0);
}

방향을 생략하면 기본값은 위에서 아래(to bottom)입니다.

radial·conic

radial-gradient는 원형으로, 중심에서 바깥으로 색이 번지는 그라데이션입니다. 가운데가 밝고 가장자리로 갈수록 어두워지는 조명 같은 느낌을 줄 때 좋습니다.

.spotlight {
  background: radial-gradient(circle, #ffffff, #333333);
}

conic-gradient는 원뿔형(각도형) 그라데이션으로, 중심을 기준으로 색이 빙 둘러 돌아가는 모양입니다. 파이 차트나 색상환 같은 효과를 만들 때 자주 씁니다.

.pie {
  background: conic-gradient(red, yellow, green, blue, red);
}

색 정지점·팁

색 정지점(color stop)은 각 색이 놓이는 위치를 직접 지정하는 기능입니다. 색 뒤에 퍼센트나 길이를 적으면 됩니다.

.bar {
  background: linear-gradient(red 0%, yellow 50%, green 100%);
}

위 코드는 시작점에 빨강, 가운데에 노랑, 끝에 초록을 배치합니다. 같은 색을 같은 위치에 두 번 적으면 경계가 또렷한 줄무늬도 만들 수 있습니다. 또한 repeating-linear-gradient를 쓰면 지정한 패턴을 반복해 줄무늬 배경을 손쉽게 만들 수 있습니다.

팁 하나. 색을 고를 때 비슷한 명도의 색을 함께 쓰면 색이 부딪치지 않고 한결 자연스럽게 이어집니다. 명도 차가 큰 색을 섞으면 가운데에 탁한 띠가 생기기 쉬우니 주의하세요.

자주 묻는 질문

그라데이션은 background와 background-image 중 어디에 넣나요? 둘 다 가능합니다. 그라데이션은 색이 아니라 이미지로 취급되기 때문에 background 단축 속성이나 background-image 속성에 함수를 넣습니다. background-color에는 넣을 수 없습니다.

방향은 각도와 키워드 중 무엇을 써야 하나요? 정해진 규칙은 없습니다. 90deg처럼 정밀하게 조정하고 싶을 때는 각도가, to right처럼 직관적으로 읽고 싶을 때는 키워드가 편합니다. 같은 결과를 둘 다로 표현할 수 있습니다.

색을 세 개 이상 넣을 수 있나요? 네. linear-gradient(red, yellow, green, blue)처럼 쉼표로 색을 계속 나열하면 됩니다. 색 정지점까지 함께 지정하면 각 색의 위치도 세밀하게 조절할 수 있습니다.

코드를 직접 짜기 어렵습니다. 더 쉬운 방법이 있나요? 색과 방향을 눈으로 보면서 조절하고 결과 코드를 바로 복사하는 CSS 그라데이션 생성기를 쓰면 문법을 외우지 않아도 됩니다.

지금까지 linear-gradient, radial-gradient, conic-gradient의 문법과 방향·색 정지점 지정법을 살펴봤습니다. 핵심은 "방향을 정하고, 색을 나열하고, 필요하면 위치를 붙인다"는 단순한 규칙입니다. 머릿속으로 그린 색을 코드로 바로 확인하고 싶다면 위 도구로 여러 조합을 실험해 보세요.