CSS3 방사형 그라디언트란?
방사형 그라디언트(radial gradient)는 지정한 색상이 요소의 중심점에서 시작하여 사방으로 원형 또는 타원형 모양으로 퍼져 나가는 효과입니다. 선형 그라디언트가 한 방향으로 색이 변화한다면, 방사형 그라디언트는 동심원을 그리듯 중심을 기준으로 색이 자연스럽게 전환되는 것이 특징입니다.
아래 예제 코드를 직접 실행해 보면 CSS3에서 방사형 그라디언트를 구현하는 방법을 손쉽게 확인할 수 있습니다.
예제 코드
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
코드 상세 설명
- red 5% — 빨간색이 중심에서부터 5% 위치까지 채워집니다.
- green 15% — 초록색이 15% 위치까지 이어지며 빨간색과 자연스럽게 섞입니다.
- pink 60% — 분홍색이 60% 위치까지 부드럽게 확장됩니다.
이처럼 각 색상 뒤에 붙는 백분율 값은 색상 정지점(color stop)이라고 하며, 해당 색상이 그라디언트의 어느 지점까지 도달하는지를 결정합니다.
브라우저 호환성을 위한 접두사(Vendor Prefix)
예제 코드에는 여러 줄의 background 속성이 반복해서 선언되어 있는데, 이는 구형 브라우저와의 호환성을 위한 것입니다.
-webkit-: Chrome, Safari 등 WebKit 기반 브라우저-o-: 구버전 Opera 브라우저-moz-: Firefox 브라우저
각 접두사가 붙은 속성을 먼저 선언하고, 마지막에 표준 문법인 radial-gradient()를 작성하는 것이 모범적인 코딩 스타일입니다. 최신 브라우저에서는 표준 문법만으로도 대부분 정상적으로 동작하지만, 다양한 환경에서 일관된 화면을 보장하기 위해 접두사를 함께 사용하는 것이 안전합니다.