Softonic

메시 그라데이션 생성기

이동 가능한 점 4개, 6개 또는 9개로 부드러운 다색 배경을 만드세요. 각 점의 색상을 선택하고 캔버스에서 위치를 옮기거나 엄선된 무작위 팔레트를 적용한 다음 SVG 또는 PNG로 내보낼 수 있습니다. 방사형 그라데이션을 겹친 CSS 근사 코드도 복사할 수 있습니다. 작업 중인 프로젝트는 현재 브라우저 탭 안에 보관됩니다.

메시 느낌의 그라데이션 만드는 방법

  1. 1

    점 개수 선택

    제어점 4개, 6개 또는 9개로 시작합니다. 점이 많을수록 색상 영역을 더 다양하게 만들 수 있습니다.

  2. 2

    색상 선택

    각 점의 색상 선택기를 사용합니다. 편집기는 여섯 자리 HEX 색상을 저장합니다.

  3. 3

    점 이동

    점을 드래그하거나 가로·세로 위치를 입력하고, 화살표 키로도 이동할 수 있습니다.

  4. 4

    출력 크기 선택

    SVG와 PNG에 사용할 가로형, 와이드 또는 정사각형 크기를 선택합니다.

  5. 5

    디자인 내보내기

    PNG나 SVG를 내려받거나 방사형 그라데이션 CSS 근사 코드를 복사합니다.

세 가지 출력 방식

  • PNG는 미리보기와 같은 거리 가중 방식으로 색상을 혼합합니다. 다른 가로세로 비율을 선택하면 같은 상대 위치의 점이 새 크기에 맞춰 그려집니다.
  • SVG는 같은 제어점에 방사형 그라데이션을 겹치므로 확대해도 선명합니다.
  • CSS는 기본 색상 위에 점마다 radial-gradient() 레이어를 하나씩 만들어 별도 이미지 파일이 필요 없습니다.

SVG와 CSS는 동일한 프로젝트 데이터를 사용하지만 메시 모양을 가볍게 근사하는 방식입니다. PNG와 픽셀 단위로 같지는 않습니다.

팔레트 선택 요령

  • 가까운 색조는 대체로 부드러운 전환을 만듭니다.
  • 대비되는 색조는 영역 사이의 경계를 더 뚜렷하게 만듭니다.
  • 무작위 팔레트는 출발점일 뿐, 텍스트 가독성을 보장하지 않습니다.
  • 완성된 배경 위의 텍스트, 아이콘, 컨트롤 대비를 확인하세요.

제어점 배치

미리보기의 번호가 붙은 점을 드래그하거나, 점에 포커스를 둔 뒤 화살표 키를 사용하세요. Shift를 누르면 한 번에 5퍼센트포인트씩 이동합니다. 가로와 세로 입력란에서 정확한 위치를 지정할 수도 있습니다.

점은 가장자리까지 이동할 수 있습니다. 여러 점을 가까이 놓으면 색상이 한 영역에 모이고, 멀리 배치하면 각 색상에 더 넓은 공간이 생깁니다.

활용 예

  • 히어로 영역 배경과 섹션 구분.
  • 소셜 미디어 카드와 동영상 미리보기 이미지.
  • 프레젠테이션과 일러스트 배경.
  • 시작 화면과 장식 패널.

PNG가 미리보기와 가장 가깝습니다. 선명하게 확대하려면 SVG를, 별도 이미지 없이 편집 가능한 배경이 필요하면 CSS를 사용하세요.

개인정보와 브라우저 저장소

색상, 위치, 해상도는 브라우저 메모리와 sessionStorage에 남으며 퍼널 URL이나 당사 서버 상태에 추가되지 않습니다. 도구는 프로젝트 값을 포함하지 않은 채 내보내기 실행 여부만 기록할 수 있습니다.

현재 탭이 열려 있는 동안 프로젝트는 sessionStorage에서 최대 6시간까지 복원할 수 있습니다. 탭을 닫으면 보통 그보다 일찍 삭제되므로 보관할 결과는 내려받거나 복사하세요.

자주 묻는 질문

렌더링 방법이 다르기 때문입니다. PNG는 거리에 따라 픽셀을 혼합하고, SVG와 CSS는 방사형 그라데이션을 겹칩니다. 색상과 위치는 같지만 픽셀은 완전히 일치하지 않습니다.

네. 점을 드래그하거나 위치 입력란을 사용하고, 포커스를 둔 뒤 화살표 키로 움직일 수 있습니다. 더 크게 이동하려면 Shift를 누르세요.

편집기는 여섯 자리 HEX 색상을 저장합니다. 색상 선택기를 사용하거나 RGB 또는 HSL을 먼저 HEX로 변환하세요.

아닙니다. 복사되는 CSS는 표준 방사형 그라데이션을 겹쳐 효과를 근사합니다.

현재 탭에서 sessionStorage를 통해 최대 6시간까지 복원할 수 있습니다. 탭을 닫으면 보통 그보다 일찍 삭제됩니다. 프로젝트는 당사 서버로 전송되거나 퍼널 URL에 추가되지 않습니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

이 도구는 다른 언어로도 제공됩니다