CSS의 radial-gradient() 함수를 사용하면 중심점에서 바깥쪽으로 퍼지는 원형 또는 타원형 그라디언트를 손쉽게 만들 수 있습니다. 각 색상 뒤에 백분율(%) 값을 지정하면 색상 정지점(color stop)의 위치를 자유롭게 조절할 수 있으며, 이를 통해 색상 사이의 간격을 서로 다르게 배치할 수도 있습니다.
간격이 다른 색상 정지점 설정하기
색상 정지점의 위치 값은 반드시 순서대로 증가할 필요가 없습니다. 예를 들어 첫 번째 정지점을 20%, 두 번째 정지점을 15%처럼 지정하면 두 색상이 해당 지점에서 겹쳐지며, 나머지 구간은 자동으로 보간되어 부드럽게 전환됩니다. 아래 예제에서는 주황색(orange)과 초록색(green)이 20%와 15% 지점에서 만나고, 노란색(yellow)은 50% 지점까지 이어집니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 200px;
background: radial-gradient(orange 20%, green 15%, yellow 50%);
}
</style>
</head>
<body>
<h2>Radial Gradient</h2>
<div id="demo">Radial Gradients</div><br>
</body>
</html>코드 설명
- height: 200px; — 그라디언트가 적용될 요소의 높이를 지정합니다.
- orange 20% — 주황색이 요소 너비의 20% 지점까지 유지됩니다.
- green 15% — 초록색이 15% 지점부터 시작하므로, 주황색과 초록색이 15%~20% 구간에서 겹치며 선명한 경계가 생깁니다.
- yellow 50% — 노란색이 50% 지점까지 이어지며, 이후에는 마지막 색상이 채워집니다.
위 코드를 실행하면 중심에서 바깥으로 퍼지면서 색상 간격이 일정하지 않은 방사형 그라디언트를 확인할 수 있습니다. 정지점 위치 값을 다양하게 변경해 가며 원하는 시각적 효과를 실험해 보세요.