CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient()는 한 중심점에서 바깥쪽으로 색이 변하는 CSS 그라데이션 이미지를 만드는 함수입니다. 원 모양은 circle, 타원 모양은 ellipse로 지정하며 기본 모양은 타원입니다. 모양·크기·중심 위치와 색상 지점을 조합해 밝은 중심, 원형 강조나 부드러운 배경을 만들 수 있습니다.

모양·크기·중심 위치를 나누어 읽기

.box {
  background-image: radial-gradient(circle at 25% 50%, yellow, red);
}

circle은 같은 거리에 있는 지점이 원을 이루도록 색을 배치하고, ellipse는 가로·세로 반지름이 다른 타원으로 배치할 수 있습니다. 직사각형에서 두 모양을 비교하면 차이가 잘 보입니다. 모양을 원으로 지정해도 배경이 그려지는 요소 자체가 원으로 잘리는 것은 아니며, 요소의 모양은 border-radius 등 별도 설정의 역할입니다.

at 25% 50%에서 첫 값은 배경 영역의 가로 위치, 둘째 값은 세로 위치입니다. 중심 위치를 생략하면 center, 즉 가운데를 사용합니다. 기본 크기는 farthest-corner이므로 마지막 색상 지점 100%의 기준이 가장 먼 모서리까지 닿도록 정해집니다.

전체 예제: 타원·원·이동·크기 비교하기

다음 코드를 radial-gradient.html로 저장하고 브라우저에서 엽니다. 같은 직사각형 안에서 기본 타원, 원, 왼쪽으로 옮긴 원과 가장 가까운 변까지의 원을 비교합니다. 이미지 파일이나 JavaScript는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>원과 타원 그라데이션 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
h1 { font-size: 24px; }
    main { max-width: 600px; display: grid; gap: 16px; }
    figure { margin: 0; }
    figcaption { margin-bottom: 6px; }
    .swatch { height: 90px; border: 1px solid #6e8295; border-radius: 6px; }
    .basic { background-image: radial-gradient(yellow, red); }
    .circle { background-image: radial-gradient(circle, yellow, red); }
    .position { background-image: radial-gradient(circle at 25% 50%, yellow, red); }
    .near { background-image: radial-gradient(circle closest-side, yellow 35%, red 100%); }
  </style>
</head>
<body>
<h1>원과 타원 그라데이션 비교</h1>
<main>
  <figure><figcaption>기본 모양: 타원</figcaption>
    <div class="swatch basic" role="img" aria-label="가운데 노랑에서 바깥 빨강으로 변하는 타원 그라데이션"></div>
  </figure>
  <figure><figcaption>circle: 원 모양</figcaption>
    <div class="swatch circle" role="img" aria-label="같은 직사각형 안에 그린 원 그라데이션"></div>
  </figure>
  <figure><figcaption>중심 위치: 가로 25%, 세로 50%</figcaption>
    <div class="swatch position" role="img" aria-label="노란 중심이 왼쪽으로 이동한 원 그라데이션"></div>
  </figure>
  <figure><figcaption>closest-side: 가까운 변까지</figcaption>
    <div class="swatch near" role="img" aria-label="가까운 변에 닿는 작은 원 바깥이 빨강으로 채워진 배경"></div>
  </figure>
</main>
</body>
</html>

첫 배경은 가로로 긴 타원의 색 분포가 보이고, 두 번째는 원 모양의 거리 기준을 사용해 위·아래 변까지 같은 방식으로 꽉 채워지지 않습니다. 세 번째는 노란 중심이 왼쪽 4분의 1 위치에 놓입니다. 마지막은 작은 원의 바깥 영역이 마지막 색인 빨강으로 이어집니다.

크기 키워드와 색상 지점의 기준

표는 circle의 반지름을 이해하기 위한 기준입니다. ellipse에서는 각 축의 반지름이 정해지는 방식도 함께 고려해야 합니다. 예제의 마지막처럼 중심이 가운데이고 가로로 긴 상자에서 circle closest-side를 쓰면 짧은 세로 방향의 절반 길이가 반지름이 됩니다. 따라서 원이 상자의 가로폭 전체를 채우지 않습니다.

마지막 규칙의 closest-side만 farthest-corner로 바꾸어 보세요. 원의 기준 크기가 커지면서 노란 구역과 전환 구역이 넓어집니다. 비교 후 closest-side로 되돌립니다. 같은 yellow 35%라도 기준 원이 달라지면 화면에서 차지하는 크기도 달라집니다. 여기서 35%를 상자 가로폭의 35%로 읽으면 안 됩니다.

색상 지점은 중심에서 바깥으로 향하는 그라데이션 선 위의 위치입니다. 예제의 yellow 35%, red 100%는 35%까지 노랑을 유지하고, 그다음 100%까지 노랑에서 빨강으로 변합니다. 마지막 지점 바깥은 마지막 색으로 이어집니다. 같은 위치에 서로 다른 색을 놓으면 선명한 원형 경계를 만들 수 있으며, 반복 고리가 필요할 때는 repeating-radial-gradient를 별도로 사용합니다.

배경에 적용할 때 확인할 점

radial-gradient는 색이 아니라 이미지 값이므로 background-image 또는 background 단축 속성에 사용합니다. background-color에 넣으면 유효한 배경색이 되지 않습니다. 배경만 있는 빈 요소는 내용이나 크기가 없으면 보이지 않을 수 있으므로 예제처럼 높이를 주거나 내용과 padding으로 영역을 확보합니다.

큰 화면과 작은 화면에서 중심이 중요한 내용을 가리지 않는지, 글자를 얹었을 때 밝은 곳과 어두운 곳 모두 읽기 쉬운지 확인하세요. 중심이 왼쪽에 있을 때 farthest-corner가 만드는 반지름은 가운데일 때와 달라질 수 있습니다. 특정한 원 크기를 유지하려면 circle과 px 반지름을 지정하는 방법도 있지만, 고정 크기와 화면 크기 변화 중 무엇을 우선할지 먼저 정하는 것이 좋습니다.

문법과 크기 계산 기준은 MDN의 radial-gradient() 설명과 W3C의 방사형 그라데이션 정의를 참고할 수 있습니다.