CSS의 radial-gradient() 함수를 사용하면 중심에서 바깥쪽으로 색상이 퍼지는 방사형 그래디언트를 손쉽게 만들 수 있습니다. 기본적으로 그래디언트는 타원(ellipse) 형태로 렌더링되지만, 첫 번째 매개변수에 circle 키워드를 지정하면 정확한 원(circle) 모양의 그래디언트를 만들 수 있습니다.
원형 방사형 그래디언트 예제
아래 코드는 circle 매개변수를 활용해 빨강 → 파랑 → 노랑 순서로 색상이 전환되는 원형 그래디언트 배경을 적용하는 예제입니다. 코드를 실행하여 결과를 직접 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 400px;
background: radial-gradient(circle, red , blue, yellow);
}
</style>
</head>
<body>
<h2>Radial Gradient</h2>
<div id = "demo">Radial Gradients</div><br>
</body>
</html>코드 설명
#demo: 그래디언트가 적용될 요소로, 높이를 400px로 지정합니다.radial-gradient(circle, red, blue, yellow): 첫 번째 인자인circle이 그래디언트의 모양을 원으로 설정하고, 이어지는 색상 값들이 중심에서 가장자리까지 순서대로 전환됩니다.
참고: 다양한 옵션
circle 외에도 그래디언트의 크기를 세밀하게 조절할 수 있습니다. 예를 들어 radial-gradient(circle closest-side, red, blue)처럼 closest-side, farthest-corner 등의 크기 키워드를 함께 사용하면 그래디언트가 퍼지는 범위를 지정할 수 있으며, at center, at top left 같은 위치 값을 추가해 그래디언트의 중심점도 자유롭게 변경할 수 있습니다.