CSS 방사형 그래디언트(Radial Gradient)로 균일한 간격의 색상 정지점 만들기

방사형 그래디언트로 균일한 간격의 색상 정지점 만들기

radial-gradient() 함수는 지정된 중심점에서 바깥쪽으로 원형 또는 타원형으로 퍼지는 그래디언트를 생성하는 CSS 함수입니다.

균일하게 간격을 둔 색상 정지점(color stop)을 만들려면 최소 두 개 이상의 색상을 쉼표(,)로 구분하여 나열하면 됩니다. 각 색상의 위치를 별도로 지정하지 않으면, 브라우저가 자동으로 모든 색상을 그래디언트 영역에 균등하게 배치해 줍니다.

예제

아래 예제에서는 주황색(orange), 초록색(green), 노란색(yellow) 세 가지 색상이 중심에서 가장자리까지 균등한 간격으로 부드럽게 전환됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 100px;
            background: radial-gradient(orange, green, yellow);
         }
      </style>
   </head>
   <body>
      <h2>Radial Gradient</h2>
      <div id = "demo">Radial Gradients</div><br>
   </body>
</html>

코드 설명

height: 100px; — 그래디언트가 적용될 요소의 높이를 설정합니다.
background: radial-gradient(orange, green, yellow); — 세 가지 색상 정지점을 순서대로 지정하며, 위치 값이 없으므로 각 색상은 시작점부터 끝점까지 균등한 비율로 분배됩니다.

참고 사항

색상을 더 추가하더라도 위치 값을 명시하지 않는 한 항상 균등한 간격으로 배치됩니다. 필요에 따라 circle, ellipse, 크기 키워드(closest-side, farthest-corner 등)를 함께 사용하여 그래디언트의 모양과 크기를 세부적으로 조절할 수도 있습니다.