CSS에서 배경 이미지를 방사형 그래디언트(radial gradient)로 설정하려면 radial-gradient() 함수를 사용합니다. 이 함수는 중심점에서 바깥쪽으로 색상이 부드럽게 퍼져나가는 원형 또는 타원형 그래디언트를 생성하며, 두 개 이상의 색상 값을 지정하여 자연스러운 색 전환 효과를 만들 수 있습니다.
radial-gradient() 기본 문법
background: radial-gradient(색상1, 색상2, 색상3, ...);
색상은 왼쪽부터 순서대로 요소의 중심에서 가장자리 방향으로 배치됩니다.
예제
아래 예제 코드를 실행하면 초록색(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>추가 팁
radial-gradient() 함수에는 그래디언트의 모양(shape)과 크기(size), 그리고 중심 위치(position)를 지정할 수도 있습니다. 예를 들어 radial-gradient(circle at top left, green, orange)처럼 작성하면 왼쪽 상단을 중심으로 하는 원형 그래디언트가 만들어집니다. 이를 활용하면 버튼 강조 효과, 조명 표현, 카드 디자인 등 다양한 UI 요소에 입체감 있는 배경을 손쉽게 적용할 수 있습니다.