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에 추가되지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

2진수 8진수 변환기

비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.

Base64 → Hex 변환기

표준 Base64 문자열을 대문자 16진수로 연속 표기한 바이트로 변환합니다. 엄격한 디코딩 방식으로 토큰, 키, JWT 서명 확인에 적합합니다.

불 대수 간소화 도구

모든 입력 조합에 대해 불리언 식을 평가하고 완전한 진리표를 보여줍니다. 변수는 최대 5개, 연산자는 &, |, !, ^를 지원합니다.