CSS 그라디언트 — 선형·원형 그라디언트 완벽 가이드
CSS 그라디언트는 이미지 없이 순수 CSS로 색상 전환 효과를 구현합니다. linear-gradient는 직선 방향, radial-gradient는 원형으로 색상이 퍼지는 방식입니다. 그라디언트는 배경, 버튼, 헤더, 카드 등 다양한 UI 요소에 적용할 수 있으며 파일 크기가 없어 성능 부담이 없습니다.
그라디언트 CSS 기본 문법:
linear-gradient(방향, 색상1, 색상2, ...)
radial-gradient(shape, 색상1, 색상2, ...)
자주 쓰이는 그라디언트 패턴:
- 버튼 배경: to right, #667eea, #764ba2
- 히어로 배경: to bottom, #0f0c29, #302b63, #24243e
- 카드 오버레이: to bottom, transparent, rgba(0,0,0,0.7)
그라디언트에 투명도를 추가하려면 rgba() 색상 표기법을 사용합니다. 예를 들어 rgba(0,0,0,0)은 완전 투명, rgba(0,0,0,0.5)는 반투명 검정입니다. 이를 이용해 이미지 위에 올려놓는 오버레이 그라디언트를 쉽게 만들 수 있습니다.
자주 묻는 질문 (FAQ)
A: conic-gradient는 중심점을 기준으로 회전하며 색상이 변하는 원뿔형 그라디언트입니다. 파이 차트, 색상환, 로딩 스피너 애니메이션 등에 활용됩니다. 최신 브라우저에서 모두 지원되며 conic-gradient(red 0deg, yellow 120deg, blue 240deg, red 360deg)처럼 사용합니다.
A: CSS만으로는 직접 애니메이션이 어렵습니다(background-position 변경으로 simulate 가능). background-size를 크게 설정하고 background-position을 이동하는 트릭으로 흐르는 그라디언트 효과를 만들 수 있습니다. 또는 CSS 변수(--color)를 키프레임으로 변경하는 방식도 있습니다.
A: linear-gradient와 radial-gradient는 IE10+를 포함한 모든 현대 브라우저에서 지원됩니다. 구형 WebKit 브라우저를 위한 -webkit- 접두사(prefix)는 현재 거의 불필요합니다. conic-gradient는 IE와 구형 Edge에서 지원되지 않으며 Chrome 69+, Firefox 83+에서 지원됩니다.