방사형 그라디언트 원형이 타원으로 보이는 이유
방사형 그라디언트에서 형태를 타원형으로 두면, 요소가 정사각형이 아닐 때 색이 사방으로 둥글게 퍼지지 않고 한쪽으로 길게 늘어진 것처럼 보일 때가 있습니다. 그라디언트 코드가 잘못된 게 아니라, 타원형(ellipse)이 그려지는 요소의 가로·세로 비율을 그대로 따라가는 CSS 자체의 동작 때문입니다. 원형(circle)과 타원형이 요소 비율을 각각 어떻게 다루는지 확인하면 이유가 분명해집니다.
요약 ① radial-gradient()의 형태는 원형(circle)과 타원형(ellipse) 두 가지이고, 요소 비율을 다루는 방식이 서로 다릅니다. ② 타원형은 요소의 가로 길이와 세로 길이를 각각 따로 반영해서, 정사각형이 아닌 요소에서는 길게 늘어진 모양으로 나타납니다. ③ 원형은 요소의 가로세로 비율과 상관없이 항상 가로·세로 반지름이 같은 완전한 원으로 그려집니다.
버튼·배너에 넣은 그라디언트가 찌그러져 보이는 이유
카드 상단이나 버튼처럼 폭이 넓고 높이가 낮은 요소에 은은한 빛 번짐 느낌을 주려고 방사형 그라디언트를 넣는 경우가 많습니다. 그런데 형태를 타원형으로 둔 채로 적용해보면, 기대했던 둥근 빛 대신 한쪽 방향으로만 길게 퍼진 모양이 나타날 때가 있습니다.
색상 정지점 위치나 색을 아무리 바꿔도 이 늘어진 모양 자체는 그대로입니다. 정지점은 어느 위치에서 무슨 색이 나타나는지만 정할 뿐, 그라디언트가 원으로 퍼질지 타원으로 퍼질지는 전혀 다른 값 — 형태(shape) — 이 결정하기 때문입니다.
원형과 타원형이 요소 비율을 다루는 방식 — 이렇게 확인합니다
도구 없이도 이 차이는 브라우저에서 바로 확인할 수 있습니다. 정사각형 요소 하나와 폭이 넓은 요소 하나를 만들고, 똑같은 색상 두 개로 방사형 그라디언트를 각각 적용해보면 됩니다.
.square { width: 200px; height: 200px;
background: radial-gradient(ellipse at center, #fb923c 0%, #0ea5e9 100%); }
.wide { width: 400px; height: 120px;
background: radial-gradient(ellipse at center, #fb923c 0%, #0ea5e9 100%); }
정사각형 요소에서는 색이 사방으로 고르게 둥글게 퍼지지만, 폭이 넓은 요소에서는 같은 코드인데도 가로 방향으로 훨씬 더 길게 늘어난 모양으로 나타납니다. ellipse의 가로 반지름과 세로 반지름이 요소의 가로 길이·세로 길이에 맞춰 각각 따로 정해지기 때문입니다.
이제 두 요소의 ellipse를 circle로 바꿔서 저장해보면 차이가 분명해집니다. 폭이 넓은 요소에서도 그라디언트는 늘어지지 않고 항상 완전한 원으로 그려지며, 다만 요소가 많이 길쭉할수록 원의 가장자리가 요소 밖으로 벗어나 일부만 보이는 것처럼 잘려 보일 수 있습니다.
저희 도구로 확인하기. 이 비교를 매번 코드로 직접 써서 저장하고 새로고침을 반복하는 대신, 버튼 하나로 형태를 바꿔가며 결과를 바로 볼 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 즉시 CSS 코드 생성
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 형태를 타원형으로 두면 늘 찌그러져 보임 | 타원형은 요소의 가로 길이와 세로 길이를 각각 따로 반영해서 늘어나기 때문입니다. |
| 원형으로 바꿔도 그라디언트 가장자리가 잘 안 보임 | 원형은 항상 완전한 동그라미를 유지하려 하기 때문에, 요소가 많이 길쭉하면 원의 가장자리가 요소 밖으로 벗어나 안쪽 색만 보일 수 있습니다. |
| 위치를 가운데가 아닌 곳으로 옮겨도 모양(원/타원)은 안 바뀜 | 위치(position)는 그라디언트의 중심이 어디서 시작하는지만 정하고, 모양이 원인지 타원인지는 형태(shape) 값이 따로 결정합니다. |
| 색상 정지점을 늘려도 찌그러짐이 그대로임 | 정지점의 개수나 위치는 색이 바뀌는 지점만 정할 뿐, 그라디언트 전체의 모양에는 영향을 주지 않습니다. |
정리
- 방사형 그라디언트의 형태는 원형(circle)과 타원형(ellipse) 두 가지이고, 요소 비율을 반영하는 방식이 다릅니다.
- 타원형은 요소의 가로 길이와 세로 길이를 각각 따로 반영해서, 정사각형이 아닌 요소에서는 늘어진 모양으로 보입니다.
- 원형은 요소 비율과 상관없이 항상 가로·세로 반지름이 같은 완전한 원으로 그려집니다.
- 색상 정지점이나 위치(position) 값은 색이 나타나는 지점과 중심 좌표만 정할 뿐, 그라디언트가 원인지 타원인지는 형태 값이 따로 정합니다.
- 정사각형 요소에서는 두 형태의 결과가 같아지므로, 늘어짐 문제는 요소가 정사각형이 아닐 때만 나타납니다.
무료 · 가입 불필요 · 브라우저에서 즉시 CSS 코드 생성
자주 묻는 질문
방사형 그라디언트에서 원형과 타원형은 정확히 뭐가 다른가요?
원형(circle)은 중심에서 모든 방향으로 반지름이 똑같은 도형이라 요소의 가로세로 비율과 무관하게 항상 동그랗게 그려집니다. 타원형(ellipse)은 가로 반지름과 세로 반지름이 요소의 가로 길이·세로 길이에 맞춰 각각 따로 정해지므로, 요소가 정사각형이 아니면 그 비율만큼 늘어난 모양이 됩니다.
위치(position)를 바꾸면 모양도 같이 바뀌나요?
아닙니다. 위치는 그라디언트가 시작되는 중심 좌표만 정합니다. 왼쪽 위든 가운데든 중심을 어디에 두더라도, 그 중심에서 원으로 퍼질지 타원으로 퍼질지는 형태 값이 따로 결정하는 별개의 설정입니다.
정사각형 요소에서는 원형과 타원형이 똑같이 보이나요?
네, 그렇습니다. 요소의 가로 길이와 세로 길이가 같으면 타원형의 가로 반지름과 세로 반지름도 같아지므로, 결과적으로 원형을 선택했을 때와 같은 모양으로 보입니다. 늘어짐 차이는 요소가 정사각형에서 벗어날 때만 드러납니다.
그라디언트가 찌그러지지 않게 하려면 어떤 형태를 선택해야 하나요?
요소 비율과 상관없이 항상 동그란 느낌을 원한다면 원형을 선택하면 됩니다. 다만 요소가 정사각형에서 많이 벗어날수록 원의 가장자리가 요소 밖으로 나가 안쪽 색만 보이는 구간이 넓어질 수 있다는 점은 감안해야 합니다.