CSS 그라데이션 소개

CSS 그라데이션(gradient)은 두 개 이상의 색상이 부드럽게 전환되는 배경 효과를 CSS만으로 구현하는 기술입니다. 이미지 파일 없이도 세련된 배경을 만들 수 있어서 페이지 로딩 속도에 영향을 주지 않으면서 디자인 품질을 높일 수 있습니다. 크게 Linear(직선형)과 Radial(원형) 두 가지 타입이 있으며, 각도, 방향, 색상 정지점(color stop)을 조절하여 무한에 가까운 다양한 패턴을 만들어낼 수 있습니다. 이 도구는 코드를 직접 작성하지 않아도 시각적으로 그라데이션을 디자인하고, 바로 사용 가능한 CSS 코드를 자동으로 생성해줍니다. CSS 그라데이션은 CSS3 표준의 일부로 도입되었으며, 과거에는 비슷한 효과를 위해 Photoshop에서 이미지를 만들어 배경으로 사용해야 했습니다. 현재는 linear-gradient, radial-gradient 외에도 conic-gradient(원뿔형)과 repeating-gradient(반복형) 같은 확장 문법도 지원됩니다. Tailwind CSS, Bootstrap 같은 프레임워크도 그라데이션 유틸리티 클래스를 제공할 만큼, 현대 웹 디자인에서 그라데이션은 가장 자주 활용되는 시각 효과 중 하나입니다.

중간이 탁해지는 이유

그라데이션을 만들다 보면 가운데가 회색빛으로 죽는 경우를 만납니다. 파랑에서 노랑으로 이어지는 그라데이션의 중간이 칙칙한 녹회색이 되는 식입니다.

원인은 브라우저가 RGB 값을 산술적으로 섞기 때문입니다. 사람 눈이 색을 인지하는 방식과 다르게 계산되어 중간 지점의 채도가 떨어집니다. 색상환에서 멀리 떨어진 두 색을 이을수록 심해집니다.

해결책은 중간 색을 직접 지정하는 것입니다. 파랑과 노랑 사이에 청록이나 연두를 하나 넣어주면 탁한 구간 없이 이어집니다. 또는 애초에 색상환에서 가까운 색끼리 조합하세요. 파랑에서 보라, 주황에서 분홍처럼 인접한 색은 중간이 자연스럽습니다.

각도와 종류 고르기

선형 그라데이션에서 0deg는 아래에서 위로, 90deg는 왼쪽에서 오른쪽으로 향합니다. 시계 방향 기준입니다. 실무에서 가장 무난한 것은 135도 대각선으로, 히어로 섹션 배경에 널리 쓰입니다.

원형 그라데이션은 중심에서 바깥으로 퍼집니다. 조명 효과나 시선 집중에 적합해 버튼의 광택 표현이나 배경의 은은한 빛 처리에 씁니다. 각 그라데이션은 원뿔 형태로 돌아 원형 차트나 색상환을 그릴 때 유용합니다.

읽기를 방해하지 않게

그라데이션 위에 글자를 올릴 때는 가장 밝은 지점과 가장 어두운 지점 양쪽에서 대비를 확인해야 합니다. 한쪽에서 잘 읽혀도 반대쪽에서 묻히는 경우가 흔합니다.

안전한 방법은 글자 뒤에 반투명한 단색 층을 한 겹 깔거나, 그라데이션의 색 범위를 좁혀 명도 차이를 줄이는 것입니다. 배경 그라데이션은 대비가 크지 않을수록 실용적입니다.

자주 묻는 질문

글자에 그라데이션을 넣을 수 있나요?

배경으로 그라데이션을 깔고 background-clip: text와 투명한 글자색을 조합하면 됩니다. 다만 이 방식은 글자가 배경 이미지처럼 처리되어 일부 환경에서 읽기 어려울 수 있습니다.

계단처럼 끊겨 보입니다

밴딩 현상입니다. 넓은 면적에 비슷한 색끼리 이을 때 나타나며, 색 단계가 부족해서 생깁니다. 미세한 노이즈를 겹치거나 중간 색을 추가하면 완화됩니다.

이미지보다 가벼운가요?

훨씬 가볍습니다. CSS 코드 몇 줄이라 별도 파일을 내려받지 않고, 화면 크기가 바뀌어도 깨지지 않으며 확대해도 선명합니다.

어떻게 동작하나요

CSS 그라데이션은 브라우저의 렌더링 엔진이 수학적 보간법(interpolation)을 사용하여 실시간으로 생성하는 이미지입니다. Linear 그라데이션의 경우, 지정된 각도에 따라 가상의 직선(gradient line)을 설정하고, 이 직선 위에 배치된 색상 정지점들 사이를 부드럽게 색상 전환합니다. 예를 들어 linear-gradient(90deg, #ff0000 0%, #0000ff 100%)는 왼쪽에서 오른쪽으로 빨간색에서 파란색으로 전환됩니다. Radial 그라데이션은 중심점에서 타원이나 원 형태로 바깥쪽으로 색상이 퍼져나갑니다. 각 색상 정지점의 위치(%)를 조절하면 전환이 시작되는 지점과 끝나는 지점을 세밀하게 제어할 수 있고, 같은 위치에 두 색상을 놓으면 경계가 뚜렷한 스트라이프 효과도 만들 수 있습니다.

비슷한 도구 살펴보기

Box Shadow 생성기 - CSS box-shadow 생성기
색상 팔레트 추출 - 이미지에서 색상 팔레트 추출
색상 피커 - 화면에서 색상 추출 (EyeDropper)
색상 변환기 - HEX, RGB, HSL 색상 변환

CSS 그라데이션 생성기