CSS의 repeating-radial-gradient() 함수를 사용하면 방사형(원형) 그라디언트를 일정한 패턴으로 반복해 표현할 수 있습니다. 일반적인 radial-gradient()와 달리, 지정한 색상 구간이 요소 전체에 걸쳐 자동으로 반복되어 동심원 형태의 줄무늬 효과를 손쉽게 만들 수 있다는 점이 특징입니다.
예제
아래 코드를 실행하면 repeating-radial-gradient() 함수가 실제로 어떻게 적용되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 300px;
background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);
}
</style>
</head>
<body>
<p>반복 방사형 그라디언트</p>
<div id = "demo"></div>
</body>
</html>코드 설명
위 예제에서는 세 가지 색상 정지점(color stop)을 지정했습니다.
- green 20% — 중심에서 20% 지점까지 초록색
- orange 40% — 20%에서 40% 사이는 주황색으로 부드럽게 전환
- maroon 40% — 40% 지점에서 즉시 밤색으로 변경되며 패턴이 다시 반복 시작
마지막 색상 정지점인 40% 이후에는 앞서 정의한 그라디언트 구간이 그대로 복제되어, 요소 전체를 채울 때까지 동일한 패턴이 반복됩니다.
활용 팁
- 색상 정지점 사이의 간격을 좁히면 더 촘촘하고 선명한 줄무늬 효과를 얻을 수 있습니다.
circle,ellipse키워드나at center처럼 위치 값을 함께 지정하면 그라디언트의 모양과 중심을 자유롭게 조절할 수 있습니다.- 버튼 배경, 로딩 인디케이터, 장식용 패턴 등 다양한 UI 요소에 응용할 수 있습니다.