CSS 그라디언트 실전 가이드
2026년 7월 28일 검토
Boltpic
현재 Boltpic 도구의 동작을 설명하고 관련 기술 자료를 연결했습니다. 이미지·브라우저·기기에 따라 달라지는 결과는 고정값이 아니라 조건과 함께 안내합니다.
CSS 그라디언트는 별도의 배경 이미지 파일을 내려받지 않고 브라우저가 그립니다. 해상도에 맞춰 선명하게 렌더링되고 코드만 바꾸면 색과 방향을 조정할 수 있어, 히어로 배경·버튼·차트·사진 위 오버레이에 잘 어울립니다.
문법 자체는 한나절이면 익힙니다. 시간이 조금 더 드는 건 요리법과 함정을 아는 것인데, 이 가이드가 다루는 게 바로 그 부분입니다.
linear-gradient: 주력 도구
background: linear-gradient(135deg, #0066cc, #7a3ce8);첫 인자는 방향입니다. 각도(0deg는 위쪽, 90deg는 오른쪽)나 “to right” 같은 키워드로 적습니다. 그다음은 색 지점(스톱)이고 개수 제한은 없습니다. 기본값은 균등 분배지만, 스톱에 퍼센트를 붙이면 배합을 조절할 수 있습니다. linear-gradient(90deg, #0066cc 30%, #7a3ce8)는 처음 30%까지 파랑을 유지하다가 섞이기 시작합니다.
하드 스톱: 줄무늬와 분할 배경
스톱 두 개를 같은 위치에 놓으면 혼합 구간이 사라지고 칼 같은 경계가 남습니다. 이 트릭 하나로 그라디언트가 패턴 생성기가 됩니다.
/* 투톤 분할 */
background: linear-gradient(90deg, #1d1d1f 50%, #f5f5f7 50%);
/* 대각선 줄무늬 */
background: repeating-linear-gradient(45deg,
#0066cc 0 12px, #eef4ff 12px 24px);방사형·원뿔형 그라디언트
radial-gradient는 중심점에서 바깥으로 퍼져 광원이나 스포트라이트 효과를 만들 수 있습니다. 예시의 radial-gradient(circle at 30% 20%, #ffffff33, transparent 60%)는 밝은 지점에서 투명하게 퍼지는 하이라이트입니다. conic-gradient는 중심을 따라 회전하며 진행률 링, 원형 차트, 색상환 등에 사용할 수 있습니다.
/* 자바스크립트 없는 70% 진행률 링 */
background: conic-gradient(#0066cc 0 70%, #e0e0e0 70% 100%);
border-radius: 50%;인터페이스 예제 세 가지
사진 오버레이. 사진 위에 흰 글씨를 그냥 올리면 사진이 밝은 자리마다 글씨가 사라집니다. 표준 해법은 그라디언트 스크림입니다. 위는 투명, 아래는 어둡게 — 글자 아래, 사진 위에 한 겹 까는 겁니다.
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)),
url(hero.webp) center / cover;그라디언트 텍스트. 그라디언트를 글자 모양대로 잘라내는 기법입니다.
.headline {
background: linear-gradient(90deg, #0066cc, #00b3a4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}버튼의 은은한 하이라이트. 위에서 아래로 작은 명도 차이를 주면 깊이를 더할 수 있습니다. 다만 이 효과가 호버·포커스·눌림 상태를 대신해서는 안 되며, 글자와 주변 배경의 대비도 함께 확인해야 합니다.
밴딩: 그라디언트의 고질병
넓거나 어두운 그라디언트에서는 매끄러운 혼합 대신 줄무늬가 보일 수 있습니다. 이런 밴딩은 색상 정밀도, 디스플레이 특성, 압축, 브라우저 렌더링 방식의 영향을 받아 기기마다 다르게 나타날 수 있습니다.
해결책을 손쉬운 순서로: 거리를 줄이거나 두 색을 더 가깝게 고르기. 중간 스톱을 추가하거나 색조를 살짝 우회시키기 — 남색 → 검정보다 남색 → 진보라 → 검정이 밴딩이 훨씬 덜합니다. 마지막으로, 거의 안 보이는 노이즈 텍스처를 한 겹 얹기. 영화와 게임이 수십 년째 그라디언트를 디더링해 온 방법입니다.
잘 섞이는 색 고르기
가까운 색조는 비교적 예측 가능한 혼합을 만들지만, 멀리 떨어진 색은 중간에 원하지 않는 중성색을 만들 수 있습니다. 이때 중간 스톱을 추가해 경로를 조절하세요. 사진에서 후보 색을 추출할 수도 있습니다. 컬러픽커나 팔레트 추출로 값을 얻고, 그라디언트 도구에서 배합한 뒤 실제 화면에서 결과를 확인하세요.
그라디언트 값 사이의 애니메이션 지원은 환경에 따라 일관되지 않을 수 있습니다. 움직임이 필요하면 큰 그라디언트의 background-position을 바꾸거나 두 레이어의 불투명도를 교차하는 방식이 더 예측 가능합니다. 대상 브라우저의 성능과 모션 감소 설정도 함께 확인하세요.