그라데이션 배경 이미지 생성기

그라데이션 이미지는 가장 간단하면서 보기 좋은 배경입니다. 휴대폰이나 컴퓨터 배경화면, 슬라이드나 영상의 뒷배경, 소셜 게시물의 임시 이미지로 쓸 수 있습니다. 이 생성기는 풀 HD, QHD, 4K, 휴대폰 배경화면, 정사각형 게시물, 스토리 같은 일반적인 화면 크기나 8192 px까지의 원하는 크기로, CSS 그라데이션과 같은 기하 구조를 써서 선형, 원형, 원뿔형 그라데이션을 그립니다. 선택 사항인 디더링은 옅은 노이즈를 더해 부드러운 혼합에 줄무늬가 생기지 않게 하며, 결과는 PNG, JPG, WebP로 내려받습니다.

사용 방법

1. 크기 프리셋을 고르거나 "직접 입력"을 고르고 너비와 높이를 입력합니다.
2. 선형, 원형, 원뿔형 중 하나를 고르고 각도(또는 원형 모양)를 정합니다.
3. 색 정지점을 한 줄에 하나씩, 선택 사항인 % 위치와 함께 입력합니다.
4. 큰 화면에는 디더링을 조금 켜 두고, 형식을 골라 내려받습니다.

계산식

linear: gradient line through the center, length = |W × sin θ| + |H × cos θ| · radial (farthest-corner): ellipse radii = (W ÷ 2 × √2, H ÷ 2 × √2) · conic: canvas start angle = θ − 90°

θ는 CSS를 따르므로 0°는 위쪽이고 각도는 시계 방향으로 돌아 90°는 왼쪽에서 오른쪽입니다. 위치가 없는 정지점은 이웃 정지점 사이에 고르게 놓이고, 앞선 값보다 낮은 위치는 CSS처럼 앞선 값으로 올립니다. 디더링은 채널마다 255에 선택한 퍼센트의 절반을 더하거나 뺀 만큼까지 노이즈를 더합니다.

예시

#FF0000에서 #0000FF로 가는 90° 그라데이션을 200 × 100 이미지에 그리면 왼쪽 열은 순수한 빨강, 오른쪽 열은 순수한 파랑이고 가운데 픽셀은 약 rgb(127, 0, 128)입니다. linear-gradient(90deg, #ff0000 0%, #0000ff 100%)와 같습니다. 위치 없이 흰색, 검정, 흰색 세 개를 넣으면 검정이 정확히 50%에 놓입니다.