CSS3 방사형 그라디언트(Radial Gradient) 만드는 방법

방사형 그라디언트(Radial Gradient)는 중심점에서 바깥쪽으로 색상이 퍼져나가는 효과를 만들 때 사용합니다. 이 그라디언트를 구현하려면 최소 두 개 이상의 색상 정지점(color stop)을 지정해야 합니다.

CSS3의 radial-gradient() 함수는 기본적으로 타원(Ellipse) 형태로 렌더링되지만, 필요에 따라 원(Circle) 등 다른 모양으로도 설정할 수 있습니다.

방사형 그라디언트의 기본 문법

background-image: radial-gradient(모양 크기 at 위치, 색상1, 색상2, ...);

모양과 위치는 생략 가능하며, 생략 시 기본값인 타원과 중앙(center)이 적용됩니다.

예제 코드

다음은 CSS를 활용해 방사형 그라디언트를 만드는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
    height: 200px;
    width: 200px;
    background-image: radial-gradient(
        rgb(255, 0, 106),
        rgb(2, 0, 128),
        rgb(0, 255, 42)
    );
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div id="radial"></div>
</body>
</html>

실행 결과

위 코드를 실행하면 핑크색에서 시작해 파란색, 초록색 순서로 중심에서 바깥으로 퍼지는 방사형 그라디언트가 적용된 200×200 크기의 사각형 요소가 화면에 나타납니다.

주요 포인트 정리

색상 정지점: 최소 두 개 이상의 색상을 지정해야 그라디언트가 생성됩니다.
기본 모양: 별도로 지정하지 않으면 타원(Ellipse)이 적용됩니다.
모양 변경: circle 키워드를 사용하면 완전한 원형 그라디언트를 만들 수 있습니다.