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

주요 기능 및 사용 예시

정확한 그라데이션 방향 계산

이 도구는 캔버스 좌표계를 사용합니다. 그라데이션은 항상 (0,0)에서 시작하며, 끝점은 (width × cos(각도) / 배율, height × sin(각도) / 배율)로 계산됩니다. 여기서 y축은 아래쪽을 향합니다. 예를 들어 1200×630 캔버스에서 135°, 100% 배율이면 끝점은 약 (-848.53, 445.48)이 되어 왼쪽 아래로 향하는 그라데이션이 만들어집니다.

배율의 영향

배율을 200%로 설정하면 벡터 길이가 절반으로 줄어듭니다. 즉, 그라데이션이 두 번째 색상에 더 빨리 도달하고, 나머지 영역은 브라우저가 끝 색상으로 채웁니다. 반복되지 않습니다.

투명도 지원

투명도 옵션을 켜면 각 색상의 투명도를 독립적으로 설정할 수 있습니다. 예를 들어 시작 색상 투명도 25%는 알파 0.75, 끝 색상 투명도 100%는 알파 0이 됩니다. 이 도구는 정확히 두 개의 색상 정지점(위치 0과 1)만 생성하며, 추가 정지점, 반복 모드, 색상 공간 선택기, 디더링, 텍스처 또는 업로드 이미지가 없습니다.

사용 예시

소셜 미디어 배너를 만들고 싶다면 1200×630 캔버스에 시작 색상 #FF5733, 끝 색상 #33FF57, 각도 45°, 배율 100%로 설정하고 생성합니다. 결과는 왼쪽 위에서 오른쪽 아래로 대각선 그라데이션이 적용된 PNG입니다.

제한 사항

• 최대 캔버스 크기는 10,000×10,000 픽셀이며, 총 픽셀 수는 2,400만을 초과할 수 없습니다. 초과 시 비율에 맞게 축소됩니다.
• 각도는 -360°~360° 범위이며 0°를 올바르게 처리합니다.
• 배율은 1%~500% 범위입니다.
• 이미지 생성은 브라우저에서 로컬로 수행되며 업로드가 필요 없습니다.

자주 묻는 질문

그라데이션 방향이 예상과 다르게 보입니다. 어떻게 조정하나요?

방향은 캔버스 좌표계를 기준으로 하며, y축이 아래를 향합니다. 각도를 조정하여 원하는 방향을 얻을 수 있습니다. 예를 들어 0°는 오른쪽, 90°는 아래쪽, 180°는 왼쪽, 270°는 위쪽입니다. 135°는 왼쪽 아래 대각선입니다.

배율을 높이면 그라데이션이 어떻게 변하나요?

배율을 높이면 그라데이션 벡터의 길이가 짧아져 두 번째 색상에 더 빨리 도달합니다. 남은 영역은 끝 색상으로 채워지며 반복되지 않습니다. 배율을 낮추면 전환이 더 점진적으로 일어납니다.

투명도를 사용할 때 주의할 점이 있나요?

투명도는 각 색상에 대해 0%에서 100% 사이로 설정할 수 있습니다. 100%는 완전 투명(알파 0)을 의미합니다. 투명한 배경이 필요한 경우 PNG 형식이 적합합니다. 또한 투명도가 있는 이미지를 다른 배경에 사용할 때 대비를 확인하세요.