온라인 방사형 그라데이션 이미지 생성기

주요 기능 및 사용 예시

이 도구는 웹 배너, 소셜 미디어 이미지, 배경 등에 사용할 수 있는 방사형 그라데이션 이미지를 빠르게 만듭니다. 예를 들어, 1200×630 픽셀 캔버스에 중심 색상 #3B82F6, 가장자리 색상 #EC4899를 선택하고 중심을 50%, 50%로 두면, 중심에서 가장자리까지 부드럽게 색이 전환되는 원형 그라데이션이 생성됩니다. 중심을 0%, 0%로 변경하면 그라데이션의 원점이 왼쪽 위 모서리로 이동합니다.

실제 동작 방식

브라우저는 선택한 중심 좌표를 기준으로 내부 반지름 0, 외부 반지름 hypot(가로, 세로)/(2×배율)인 동심원을 그립니다. 두 색상 정지점은 0과 1에 고정됩니다. 중심을 이동해도 반지름이 가장 먼 모서리까지 확장되지 않으므로, 중심을 모서리로 옮기면 일부 영역이 단색으로 채워질 수 있습니다.

크기 및 배율 제한

가로·세로는 각각 1~10,000픽셀, 총 픽셀 수는 2,400만 개로 제한됩니다. 요청한 크기가 이 예산을 초과하면 비율에 맞게 축소됩니다. 배율은 1~500%이며, 기본 100%에서 1200×630 이미지의 외부 반지름은 약 677.66픽셀입니다. 배율을 200%로 설정하면 반지름이 약 338.83픽셀로 절반이 됩니다.

투명도 처리

끝점 투명도를 활성화하면 각 끝점의 투명도(%)가 알파 값(1 - 투명도/100)으로 변환됩니다. 예를 들어 25% 투명도는 알파 0.75가 됩니다. 외부 원 바깥 영역은 가장자리 색상으로 채워지며 반복되지 않습니다. PNG 형식을 사용하므로 알파 채널이 유지됩니다.

체크리스트

• 중심 색상과 가장자리 색상을 선택했는지 확인
• 이미지 크기가 총 2,400만 픽셀 이하인지 확인
• 중심 위치와 배율이 의도한 대로 설정되었는지 확인
• 투명도 옵션을 사용할 때 알파 값이 올바른지 확인
• 생성된 이미지의 모서리 커버리지를 미리보기로 확인

자주 묻는 질문

중심을 0%, 0%로 설정하면 어떻게 되나요?

중심을 0%, 0%로 설정하면 그라데이션의 원점이 캔버스의 왼쪽 위 모서리에 배치됩니다. 기본값인 50%, 50%로 되돌아가지 않으며, 이 경우 그라데이션 원이 캔버스의 일부만 덮을 수 있습니다.

배율을 높이면 이미지가 어떻게 달라지나요?

배율을 높이면 외부 반지름이 작아져 그라데이션 원이 더 작아집니다. 예를 들어 배율 200%는 반지름을 절반으로 줄입니다. 따라서 중심에서 가장자리까지의 색상 전환이 더 급격해집니다.

투명도를 설정하면 어떤 효과가 있나요?

투명도를 설정하면 해당 끝점의 알파 값이 조정되어 그라데이션이 투명해집니다. 예를 들어 가장자리 투명도를 100%로 설정하면 가장자리가 완전히 투명해져 다른 배경과 합성할 수 있습니다. PNG 형식으로 저장되므로 투명도가 유지됩니다.