CSS에서 반복 방사형 그래디언트란?
방사형 그래디언트(radial gradient)를 일정한 패턴으로 반복해서 표현하고 싶다면 repeating-radial-gradient() 함수를 사용하면 됩니다. 이 함수는 일반적인 radial-gradient()와 사용법이 거의 같지만, 마지막 색상 정지점(color stop)에 도달한 뒤 자동으로 같은 패턴이 반복되어 줄무늬 형태의 원형 배경을 손쉽게 만들 수 있다는 점이 다릅니다.
색상 정지점 사이의 간격이 좁을수록 반복되는 무늬가 촘촘해지고, 간격이 넓을수록 부드럽고 넓은 띠가 만들어집니다.
예제
아래 코드를 실행하면 초록(green), 주황(orange), 밤색(maroon) 색상이 반복되는 방사형 그래디언트 배경을 확인할 수 있습니다.
<!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>코드 설명
위 예제에서는 높이 300px인 div 요소에 repeating-radial-gradient()를 배경으로 적용했습니다. 중심점을 기준으로 green이 20%까지, orange가 40%까지, maroon이 40%부터 시작되며, 이 패턴이 요소 전체를 채울 때까지 계속 반복됩니다.
repeating-radial-gradient()는 버튼 배경, 로딩 인디케이터, 장식용 패턴 등 다양한 UI 요소에 활용할 수 있으며, 별도의 이미지 파일 없이 CSS만으로 가볍고 선명한 그래픽 효과를 구현할 수 있습니다.