그라데이션 이미지 생성기

언제 사용하나요?

배너 배경, 썸네일 배경, 디자인 시안용 그라데이션 이미지를 바로 만들 때 사용합니다.

사용 방법

• 크기와 방향을 입력합니다.
• 시작·끝 색상을 선택합니다.
• PNG 이미지를 생성합니다.

입력값 안내

가로/세로 픽셀 크기, 그라데이션의 진행 방향(가로, 세로, 대각선 등), 그리고 시작 색상과 끝 색상을 설정합니다.

계산·변환 기준

Canvas API의 createLinearGradient를 사용하여 설정된 방향과 색상 정지점(Color Stops)을 기반으로 선형 그라데이션 이미지를 렌더링하고 PNG로 반환합니다.

사용 예시

• 배경 이미지 제작 - 가로, 세로, 대각선 그라데이션 이미지를 만듭니다.
• 업로드 전 이미지 준비 - 작업 결과를 미리 확인한 뒤 블로그, 쇼핑몰, SNS에 올릴 이미지 파일을 정리합니다.
• 작업 결과 비교 - 원본과 결과 이미지를 나란히 확인하며 품질과 용량, 표시 상태를 점검합니다.

예시

• 대각선 방향, 시작 #ff7eb3, 끝 #ff758c → 부드러운 핑크톤 대각선 그라데이션 이미지 생성
• 세로 방향, 보라→파랑 → 모바일 앱 시작 화면 배경 생성

주의사항

• 브라우저 캔버스를 이용해 이미지를 처리하므로 원본 메타데이터(EXIF)가 손실되거나 투명 영역 색상이 변할 수 있습니다.
• 브라우저 환경의 이미지 디코딩 용량 한계로 인해, 지나치게 해상도가 높은 대용량 원본 파일의 변환은 실패할 수 있습니다.

자주 묻는 질문

CSS 그라데이션도 생성하나요?

이 도구는 PNG 이미지를 생성합니다. CSS 값은 CSS 그라데이션 생성기를 사용하세요.

색상을 몇 개까지 쓸 수 있나요?

시작 색과 끝 색 두 가지를 지정해 부드럽게 이어지는 그라데이션 이미지를 만듭니다.

어떤 크기로 저장되나요?

원하는 가로·세로 크기를 지정해 배너나 썸네일 배경에 맞는 PNG로 저장할 수 있습니다.

그라데이션 방향을 고를 수 있나요?

가로·세로·대각선 등 방향과 두 색상을 선택해 원하는 분위기의 배경 이미지를 만들 수 있습니다.

관련 도구

• 단색 이미지 생성기 - 색상과 크기를 입력해 단색 PNG 이미지를 생성합니다.
• 이미지 색상 추출기 - 이미지 픽셀을 브라우저에서 분석해 주요 색상 HEX 코드를 추출합니다.
• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• 이미지 리사이즈 - 여러 이미지를 서버 업로드 없이 브라우저에서 비율을 유지하며 리사이즈합니다. JPEG·PNG·WebP 등을 지원하며 최대 가로·세로 픽셀을 지정하면 해상도가 일괄 축소됩니다.
• 이미지 크롭 - 픽셀 좌표를 입력해 이미지의 필요한 영역만 브라우저에서 잘라냅니다.
• 이미지 회전/뒤집기 - 이미지를 90도 단위로 회전하거나 좌우·상하로 뒤집습니다.