CSS 그라디언트: 색상 전환이 흐릿하게 보이는 이유와 해결 방법

Source: Dev.to

왜 그라디언트가 탁해 보일까

두 개의 선명한 색 사이에 그라디언트를 만들면 중간에 예상치 못한 회색 띠가 나타날 수 있습니다. 이는 브라우저가 기본 sRGB 색 공간에서 색을 보간하기 때문이며, 이 색 공간은 RGB 큐브를 직선으로 가로지릅니다.

예를 들어, 파랑 (#0000FF)과 노랑 (#FFFF00) 사이의 직선은 대략 #808080이라는 회색 중간값을 지나게 됩니다. RGB 모델은 인간의 색 인식과 일치하지 않기 때문에, 인지적으로 다른 색이 RGB 공간에서는 가깝게 위치할 수 있고 그 반대도 마찬가지입니다.

색 보간과 인지 색 공간

탁한 전환을 피하려면 인지 색 공간에서 색을 보간해야 합니다. 최신 CSS에서는 in 키워드를 사용해 보간 공간을 지정할 수 있습니다.

/* sRGB에서 탁한 전환 */
.gradient-srgb {
  background: linear-gradient(to right, blue, yellow);
}

/* OKLCH에서 선명한 전환 */
.gradient-oklch {
  background: linear-gradient(in oklch to right, blue, yellow);
}

in oklch 구문은 브라우저에게 OKLCH 색 공간에서 보간하도록 지시합니다. 이 색 공간은 회색을 통과하기보다 더 풍부한 색조를 따라가므로 자연스러운 그라디언트를 만들 수 있습니다.

CSS 그라디언트 함수

Linear Gradient

직선 경로를 따라 전환을 만듭니다.

background: linear-gradient(135deg, #667eea, #764ba2);

• Angle는 방향을 정의합니다: 0deg (아래‑위), 90deg (왼쪽‑오른쪽), 135deg (왼쪽 위‑오른쪽 아래).
• to right, to bottom left 등과 같은 키워드도 사용할 수 있습니다.

Radial Gradient

중심점에서 바깥쪽으로 전환합니다.

background: radial-gradient(circle at 30% 50%, #667eea, #764ba2);

• 형태: circle 또는 ellipse.
• 위치(at 30% 50%)는 중심을 설정합니다; 기본값은 요소 중앙의 타원입니다.

Conic Gradient

색상 휠처럼 중심점을 기준으로 회전하면서 전환합니다.

background: conic-gradient(from 0deg at 50% 50%, #667eea, #764ba2, #667eea);

콘식 그라디언트는 파이 차트, 색상 선택기, 원형 진행 표시기 등에 적합합니다.

색상 스톱 제어

기본적으로 색상 스톱은 균등하게 배치되지만, 명시적으로 위치를 지정할 수 있습니다.

/* 파란색이 그라디언트 대부분을 차지 */
background: linear-gradient(
  to right,
  #667eea 0%,
  #667eea 60%,
  #764ba2 100%
);

하드 엣지

두 스톱을 같은 위치에 두면 급격한 경계가 생깁니다.

/* 50%에서 선명한 색 경계 */
background: linear-gradient(
  to right,
  #667eea 50%,
  #764ba2 50%
);

중간점 힌트

색상 힌트를 사용해 전환의 중간점이 발생하는 위치를 조정할 수 있습니다.

background: linear-gradient(
  to right,
  #667eea,
  30%,               /* 중간점을 50%가 아니라 30%에 두기 */
  #764ba2
);

깊이를 위한 중간 스톱 추가

두 색만 사용하는 단순 그라디언트는 평평해 보일 수 있습니다. 중간 스톱을 추가하면 입체감이 느껴집니다.

/* 평평함 */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 깊이가 풍부함 */
background: linear-gradient(
  135deg,
  #667eea 0%,
  #5a67d8 30%,
  #764ba2 100%
);

중간 색은 선명함을 유지하는 블렌드여야 합니다. 인지 색 공간(예: OKLCH)에서 선택하면 단순한 산술 평균보다 더 좋은 결과를 얻을 수 있습니다.