대부분의 그라데이션 도구는 CSS 한 줄만 던져줄 뿐입니다. 이 도구는 실제 canvas에 그라데이션을 그려서, 필요한 정확한 픽셀 크기로 완성된 PNG를 다운로드할 수 있게 해줍니다. 휴대폰 배경화면이든, 1920x1080 데스크톱 배경이든, 정사각형 소셜 게시물이든, 커스텀 크기든 상관없습니다. 아무것도 서버에 업로드되지 않으며, 이미지는 전부 사용자의 기기에서 그려지고 저장되므로 색상과 파일이 외부로 유출되지 않습니다.
무료 그라데이션 생성기
브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.
그라데이션 생성기란 무엇인가요?
그라데이션 생성기는 두 가지 이상의 색상을 부드럽게 섞어 그라데이션을 만들고, 다운로드할 수 있는 이미지로 내보내는 도구입니다. 색상과 색상 정지점을 고르고 선형 또는 방사형을 선택한 뒤 크기를 설정하면, 배경화면이나 배경, 배너, 썸네일용 PNG를 저장할 수 있습니다. 모든 과정은 브라우저 안에서 처리됩니다.
사용 방법
- 1선형 또는 방사형 선택하기. 선형은 설정한 각도를 따라 일직선으로 색을 섞고, 방사형은 중심에서 바깥쪽으로 원형으로 색을 퍼뜨립니다.
- 2색상과 색상 정지점 설정하기. 색상 견본을 클릭해 색을 고르고, 슬라이더를 드래그해 정지점 위치를 옮기세요. 정지점은 최대 8개까지 추가하거나 최소 2개까지 줄일 수 있고, 랜덤 버튼을 누르면 빠르게 아이디어를 얻을 수 있습니다.
- 3이미지 크기 정하기. 프리셋(데스크톱, 휴대폰, 정사각형, 소셜)을 탭하거나, 원하는 가로세로 크기를 픽셀 단위로 직접 입력하세요. 미리보기는 실시간으로 업데이트됩니다.
- 4PNG 다운로드하기. 'PNG 다운로드'를 클릭하면 그라데이션을 전체 해상도의 이미지로 저장할 수 있습니다. 또는 CSS를 복사해 코드에서 같은 그라데이션을 그대로 재사용할 수도 있습니다.
이런 분께 추천
- 디자이너와 콘텐츠 제작자가 Photoshop을 열지 않고도 슬라이드, 썸네일, 배너, 스토리에 쓸 깔끔한 그라데이션 배경 이미지가 필요할 때.
- 휴대폰과 데스크톱 사용자가 자신의 화면 해상도에 정확히 맞는 맞춤형 그라데이션 배경화면을 만들고 싶을 때.
- 개발자가 가벼운 그라데이션 PNG 플레이스홀더나 히어로 이미지, 그리고 코드로 그대로 재현할 수 있는 CSS까지 함께 원할 때.
- 소셜 미디어 담당자가 게시물, 스토리, 커버 이미지 크기에 맞춰 브랜드에 어울리는 그라데이션 배경을 내보낼 때.
자주 묻는 질문
이 그라데이션 생성기는 무료인가요?
네, 100% 무료이며 회원가입도, 워터마크도, 사용 제한도 없습니다. 원하는 만큼 그라데이션 이미지를 만들고 다운로드할 수 있습니다.
서버에 무언가 업로드되나요?
아니요. 그라데이션은 canvas를 이용해 브라우저 안에서만 그려지고 저장됩니다. 색상, 이미지, 사용 데이터 어느 것도 어디로도 전송되지 않습니다.
어떤 이미지 형식으로 내보내나요?
PNG로 내보내며, 압축으로 인한 손상 없이 완벽하게 매끄럽고 무손실인 그라데이션을 유지합니다. 파일은 설정한 픽셀 크기 그대로 저장되어 배경화면, 배경, 업로드용으로 바로 사용할 수 있습니다.
그라데이션 배경화면은 어떤 크기로 만들어야 하나요?
화면에 맞추는 것이 좋습니다. 흔히 쓰는 크기는 대부분의 데스크톱용 1920x1080, 세로 방향 휴대폰용 1080x1920, 정사각형 소셜 게시물용 1080x1080입니다. 최대 8000픽셀까지 원하는 가로세로 크기를 직접 입력할 수도 있습니다.
선형 그라데이션과 방사형 그라데이션의 차이는 무엇인가요?
선형 그라데이션은 선택한 각도를 따라 일직선으로 색을 섞어서 이미지 전체에 걸쳐 색이 이동합니다. 방사형 그라데이션은 중심점에서 시작해 원형으로 바깥쪽으로 퍼져서, 색이 중앙에서 가장자리로 갈수록 변합니다.
이미지와 함께 CSS도 받을 수 있나요?
네. 다운로드 가능한 PNG와 함께, 도구는 대응하는 background-image CSS도 보여줍니다. 이를 복사하면 이미지 파일 대신 웹사이트나 앱에서 완전히 동일한 그라데이션을 재현할 수 있습니다.
색상 정지점은 어떻게 작동하나요?
각 정지점은 색상 하나를 그라데이션 상의 0%에서 100% 사이의 위치와 짝짓습니다. 인접한 정지점 사이는 부드럽게 이어집니다. 두 정지점을 같은 위치에 두면 부드러운 전환 대신 뚜렷한 경계가 생기는데, 이는 줄무늬나 색상 블록 배경을 만들 때 유용합니다.