Question 1

CSS 그라데이션 중간 영역이 칙칙한 회색빛으로 탁하게 보이는 이유는?

Accepted Answer

컴퓨터 그래픽 분야에서 '그레이 데드 존(Gray Dead Zone)'이라 부르는 현상입니다. 기본 sRGB 색 공간에서 파랑과 노랑 등 반대 색상을 선형 보간하면 중간값이 채도가 낮은 회색을 통과하게 됩니다. 해결 방법: 중간에 조화로운 색상(녹색 등)의 컬러 스톱을 추가합니다.또는 모던 CSS Color 4의 OKLCH 보간 구문을 사용합니다: background: linear-gradient(in oklch to right, blue, yellow);（인간의 지각 밝기를 유지하여 선명하게 보간됩니다).

Question 2

CSS에서 마우스 호버(Hover) 시 그라데이션 배경을 부드럽게 애니메이션하려면?

Accepted Answer

브라우저는 background-image 속성에 직접 transition 효과를 줄 수 없습니다. 대신 배경 크기를 확장하고 background-position을 애니메이션하여 부드러운 60fps 전환 효과를 구현합니다: .gradient-btn {
  background: linear-gradient(135deg, #4F46E5, #EC4899);
  background-size: 200% 200%;
  transition: background-position 0.4s ease;
}
.gradient-btn:hover {
  background-position: 100% 100%;
}

Question 3

linear-gradient(선형)와 radial-gradient(원형)의 차이는 무엇인가요?

Accepted Answer

linear-gradient()는 각도(예: 90deg) 또는 방향(to bottom right)을 따라 직선 방향으로 색상을 전환합니다. radial-gradient()는 중심점을 기준으로 동심원이나 타원형으로 방사형 전개되어 스포트라이트나 부드러운 배경 후광 효과에 적합합니다.

Question 4

CSS 그라데이션으로 세련된 글래스모피즘(유리 효과)을 구현하려면?

Accepted Answer

반투명 RGBA 그라데이션 오버레이와 GPU 가속 블러 효과를 결합합니다: .glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

Question 5

복잡한 CSS 그라데이션이 모바일 렌더링 성능이나 배터리에 부담을 주나요?

Accepted Answer

아닙니다. 비트맵 이미지(PNG/WebP)와 달리 CSS 그라데이션은 디바이스 GPU에서 즉시 연산되는 벡터 수식입니다. 네트워크 대역폭 소모가 전혀 없고 메모리 점유율도 극히 낮습니다.

CSS 그라데이션 생성기

CSS 그라데이션의 원리

선형 그라데이션 (Linear Gradients)

자주 묻는 질문 (FAQ)