CSS의 radial-gradient() 함수를 사용하면 중심점에서 바깥쪽으로 퍼지는 방사형(radial) 그라디언트를 배경 이미지로 손쉽게 설정할 수 있습니다. 색상을 두 개 이상 지정하면, 지정한 순서대로 중앙에서 가장자리 방향으로 자연스럽게 색이 전환됩니다.
기본 문법
radial-gradient() 함수의 기본 형태는 다음과 같습니다.
background: radial-gradient(색상1, 색상2, ...);
색상은 쉼표(,)로 구분하여 여러 개 지정할 수 있으며, 각 색상 뒤에 백분율이나 픽셀 값을 추가하면 해당 색상이 시작되는 위치를 직접 조절할 수도 있습니다.
예제
아래 예제에서는 초록(green), 주황(orange), 적갈색(maroon) 세 가지 색상으로 방사형 그라디언트 배경을 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 200px;
background: radial-gradient(green, orange, maroon);
}
</style>
</head>
<body>
<p>방사형 그라디언트를 배경으로 설정합니다.</p>
<div id = "demo"></div>
</body>
</html>실행 결과
코드를 실행하면 높이 200px의 영역에 초록색이 중앙에 위치하고, 그 주위로 주황색, 다시 적갈색 순서로 부드럽게 번지는 원형 그라디언트가 나타납니다.
참고 사항
radial-gradient()는 기본적으로 타원(ellipse) 형태로 렌더링되며, circle 키워드를 사용하면 완전한 원형으로 변경할 수 있습니다. 또한 at top right, at center 같은 위치 값을 함께 지정하면 그라디언트의 중심점을 원하는 곳으로 이동시킬 수 있어 더욱 다양한 디자인 연출이 가능합니다.