CSS3의 repeating-radial-gradient 함수를 사용하면 방사형 그라디언트가 지정된 색상 정지점(color stop)을 기준으로 무한히 반복되는 패턴을 손쉽게 만들 수 있습니다. 일반적인 radial-gradient가 마지막 색상으로 채워지고 끝나는 것과 달리, 반복 방사형 그라디언트는 정의된 구간이 중심에서 바깥쪽으로 계속 순환되어 줄무늬나 동심원 패턴 같은 효과를 냅니다.
기본 문법
background: repeating-radial-gradient(시작 색상, 색상1 위치1, 색상2 위치2, ...);
예제 코드
아래 예제는 파란색에서 시작해 노란색(10%), 초록색(15%)으로 이어지는 색상 구간이 반복되는 방사형 그라디언트를 div 요소에 적용한 코드입니다. 직접 실행해서 결과를 확인해 보세요.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>코드 설명
- blue: 그라디언트의 시작 색상으로, 중심점에서 표시됩니다.
- yellow 10%: 중심에서부터 10% 지점까지 노란색으로 변합니다.
- green 15%: 15% 지점에서 초록색이 되며, 이 구간(0%~15%)이 이후 계속 반복됩니다.
브라우저 호환성 접두사
구형 브라우저와의 호환성을 위해 벤더 접두사(vendor prefix)를 함께 작성하는 것이 좋습니다.
-webkit-: Chrome, Safari 등 WebKit 기반 브라우저-moz-: Firefox-o-: 구버전 Opera
표준 문법인 repeating-radial-gradient()는 항상 마지막에 선언하여, 접두사를 지원하지 않는 최신 브라우저에서도 올바르게 적용되도록 합니다.
활용 팁
반복 방사형 그라디언트는 로딩 인디케이터, 배경 무늬, 타겟 모양의 동심원 디자인, 빈티지 느낌의 패턴 등을 이미지 파일 없이 CSS만으로 구현할 때 유용합니다. 색상 정지점의 간격을 좁히면 촘촘한 줄무늬가, 넓히면 부드러운 확산 효과가 만들어집니다.