CSS 그라디언트 색상 정지점 원리, 색이 급변하고 탁해지는 이유

파란색과 보라색처럼 톤이 비슷한 두 색으로 그라디언트를 만들면 대체로 무난하게 이어집니다. 그런데 색상 정지점 하나의 위치를 옮기거나, 밝기 차이가 큰 두 색을 그대로 이어보면 이야기가 달라집니다. 어느 순간 경계가 유독 선명하게 끊기거나, 중간에 어느 색도 아닌 탁한 얼룩 같은 구간이 보이는 경우가 생깁니다.

이 현상은 그라디언트가 고장 나서 생기는 게 아니라, 색상 정지점이 원래 하는 일 — 두 색 사이를 선형으로 채워 넣는 것 — 을 그대로 보여주는 결과입니다. 정지점 위치가 왜 색이 바뀌는 "속도"를 정하는지, 그 속도가 좁은 구간에 몰릴 때 왜 탁해 보이는지를 원리부터 살펴보겠습니다.

요약 ① 색상 정지점은 "이 위치에서 이 색이 100%"라는 좌표이고, 정지점 사이 구간은 두 색이 선형으로 섞이며 채워집니다. ② 정지점 간격이 좁으면 그 좁은 구간 안에서 색이 몰아서 바뀌기 때문에 변화가 급격하게 보이고, 간격이 넓으면 완만하게 보입니다. ③ 밝기·색상 차이가 큰 두 색을 정지점 없이 바로 이으면, 두 색의 중간값이 어느 쪽도 아닌 탁한 색으로 나타나 눈에 띄는 얼룩처럼 보일 수 있습니다.

색상 정지점이란 무엇인가

linear-gradient()나 radial-gradient() 같은 CSS 그라디언트 함수는 색상을 쉼표로 나열하고, 각 색상 뒤에 몇 %인지를 적을 수 있습니다. 이 "몇 %" 값이 색상 정지점입니다. 정지점은 "이 위치에서는 이 색이 정확히 100%로 나타난다"는 좌표 하나를 정하는 역할만 합니다.

정지점과 정지점 사이의 구간은 브라우저가 알아서 채웁니다. 두 정지점 사이의 어느 지점이든, 그 지점이 두 정지점 사이에서 몇 % 위치에 있는지를 계산해서 앞 색과 뒤 색을 그 비율만큼 선형으로 섞은 색을 보여줍니다. 그라디언트가 "색을 보간한다"고 말할 때의 실제 의미가 바로 이것입니다.

정지점 위치가 곧 색이 바뀌는 속도다

정지점 사이의 간격은 색이 바뀌는 속도를 그대로 결정합니다. 두 정지점이 0%와 15%처럼 가깝게 붙어 있으면, 앞 색에서 뒤 색으로 넘어가는 변화 전체가 이 좁은 15% 구간 안에 몰려서 일어납니다. 눈에는 색이 갑자기 뚝 바뀌는 것처럼 보입니다.

반대로 같은 두 색을 0%와 90%처럼 멀리 떨어뜨려 두면, 똑같은 변화량이 넓은 구간에 걸쳐 나뉘어 일어나므로 훨씬 완만하게 보입니다. 색 자체는 하나도 안 바뀌었는데 정지점 위치만 옮겼을 뿐인데 인상이 완전히 달라지는 이유가 여기에 있습니다.

정지점을 세 개 이상 쓸 때도 마찬가지입니다. 두 정지점이 가까이 붙어 있는 구간은 빠르게 바뀌고, 그다음 정지점까지 멀리 떨어진 구간은 색이 거의 그대로 유지되는 것처럼 보입니다. 같은 색 조합이라도 위치 숫자만 바꾸면 전혀 다른 그라디언트가 만들어집니다.

밝기 차이가 큰 색을 바로 이으면 중간이 탁해지는 이유

그라디언트는 기본적으로 두 색의 각 색상 채널값을 그대로 선형으로 섞어서 중간 색을 만듭니다. 문제는 밝은 노랑과 짙은 남색처럼 밝기와 색상이 크게 다른 두 색을 정지점 없이 바로 이으면, 이 채널별 산술 평균이 어느 쪽 색과도 닮지 않은 어중간한 회갈색 계열 톤으로 떨어질 때가 있다는 점입니다.

이 어중간한 톤이 좁은 구간에 몰려 나타나면, 매끄러운 그라디언트가 아니라 중간에 지저분한 얼룩이나 띠가 낀 것처럼 보입니다. 이런 현상을 흔히 "그라디언트 밴딩"이라고 부르기도 하지만, 8비트 색상 정보 손실로 생기는 진짜 밴딩과는 원인이 다릅니다. 여기서 보이는 얼룩은 파일 손상이 아니라 정지점 사이를 선형으로 곧장 이은 결과 그 자체입니다.

손으로 값을 하나씩 바꿔가며 확인하려면

이 관계를 도구 없이 확인하려면 CSS 코드를 직접 써야 합니다. linear-gradient(각도, 색상1 위치1%, 색상2 위치2%, …) 문법에 맞춰 색상 코드와 위치 숫자를 채우고, 파일을 저장한 뒤 브라우저를 새로고침해서 눈으로 확인하는 과정을 거칩니다.

정지점 위치 하나만 바꿔도 결과가 달라지므로, 숫자를 조금씩 바꿔가며 저장과 새로고침을 반복해야 합니다. 색상 두세 개, 위치 두세 개를 동시에 맞춰보고 싶다면 이 과정을 값의 조합 수만큼 되풀이해야 하는 번거로움이 있습니다.

직접 해보기 →

그라디언트 생성기가 정지점 조작을 실시간으로 보여주는 방식

그라디언트 생성기는 상단에 실제 배경색 미리보기 영역을 두고, 여기에 지금 설정한 값 그대로 만들어진 CSS 배경색을 그대로 적용합니다. 브라우저가 실제로 그리는 그라디언트를 그대로 보여주는 것이므로, 미리보기에서 본 색과 실제 사이트에 적용했을 때의 색이 다르지 않습니다.

각 색상 정지점은 한 줄로 나열되고, 줄마다 색상 피커와 헥스 코드 입력창, 0~100 사이의 위치 숫자 입력창이 붙어 있습니다. "+ 색상 추가" 버튼을 누르면 정지점을 필요한 만큼 늘릴 수 있고, 위치 숫자만 바꾸면 앞서 설명한 "변화 속도"를 바로 조절해볼 수 있습니다. 아래쪽 CSS 칸에는 완성된 linear-gradient()/radial-gradient() 문법이 그대로 나타나 복사 버튼으로 바로 가져갈 수 있습니다.

정지점을 순서대로 안 넣어도 되는 이유

정지점을 입력창에 추가하는 순서와 그라디언트에 실제로 나타나는 순서는 다를 수 있습니다. 그라디언트 생성기는 화면에 표시된 순서와 상관없이, 저장된 위치(%) 값을 기준으로 정지점을 다시 정렬한 뒤에 최종 CSS를 만듭니다.

그래서 중간에 정지점 하나를 새로 끼워 넣고 싶을 때, 목록 맨 아래에 추가한 다음 위치 숫자만 원하는 값으로 바꿔도 됩니다. 순서를 맞추려고 기존 줄을 지우고 다시 만들 필요가 없습니다.

정리

• 색상 정지점은 "이 위치에서 이 색이 100%"라는 좌표이며, 정지점 사이 구간은 두 색이 선형으로 섞이며 채워집니다.
• 정지점 간격이 좁을수록 그 구간의 색 변화는 빠르게, 넓을수록 완만하게 보입니다 — 정지점 위치가 곧 변화 속도입니다.
• 밝기·색상 차이가 큰 두 색을 정지점 없이 바로 이으면, 채널별 산술 평균이 어중간한 탁한 톤으로 떨어져 얼룩처럼 보일 수 있습니다.
• 이 얼룩은 파일 손상으로 생기는 진짜 8비트 밴딩과는 원인이 다른, 정지점 보간 자체의 결과입니다.
• 그라디언트 생성기는 정지점 값을 바꿀 때마다 실제 CSS 배경을 즉시 다시 그려서, 위치·색상 조합에 따른 변화를 눈으로 바로 비교할 수 있게 해줍니다.

자주 묻는 질문

CSS 그라디언트에서 색상 정지점이 정확히 뭔가요?

정지점은 그라디언트 함수 안에서 특정 색이 몇 % 위치에서 100%로 나타나는지를 정하는 좌표입니다. linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)처럼 색상 뒤에 붙는 숫자가 정지점이고, 정지점과 정지점 사이의 나머지 구간은 두 색을 선형으로 섞어서 채워집니다.

정지점 위치를 다르게 두면 왜 색이 급하게 바뀌어 보이나요?

색이 바뀌는 변화량 전체가 두 정지점 사이의 간격 안에서만 일어나기 때문입니다. 정지점을 좁은 구간에 몰아넣으면 그만큼 짧은 거리 안에서 색이 전부 바뀌어야 하므로 변화가 급격하게 보이고, 넓게 벌려두면 같은 변화량이 넓은 구간에 나뉘어 완만하게 보입니다.

밝기 차이가 큰 두 색을 이으면 왜 중간이 탁해 보이나요?

그라디언트는 기본적으로 두 색의 채널값을 그대로 산술 평균 내며 중간 색을 만듭니다. 밝은 색과 어두운 색처럼 차이가 큰 두 색은 이 평균값이 어느 쪽 색과도 닮지 않은 회갈색 계열로 떨어질 수 있고, 이 톤이 좁은 구간에 몰리면 매끄러운 전환이 아니라 얼룩이나 띠처럼 보입니다.

선형(linear)과 원형(radial) 그라디언트는 정지점 개념이 다른가요?

정지점이 "위치별로 색이 선형으로 섞인다"는 기본 원리는 같습니다. 차이는 그 위치가 어떤 모양을 따라 퍼지느냐입니다. 선형은 지정한 각도 방향의 직선을 따라 정지점이 배치되고, 원형은 중심에서부터 바깥으로 퍼지는 동심원을 따라 정지점이 배치된다는 점만 다릅니다.