메시 그라디언트를 캔버스의 여러 위치에 색을 배치해 만들기. SVG·PNG·CSS로 export.
🌫️ 미리보기

메시 그라디언트 생성기 사용법

  1. 캔버스 크기와 블러 강도를 조정합니다.
  2. 색 포인트 수(3~9)를 선택하면 각 포인트의 색과 위치를 조정할 수 있습니다.
  3. 프리셋(따뜻한·차가운·파스텔·비비드·브랜드)으로 빠르게 시작할 수 있습니다.
  4. 🎲 랜덤으로 영감을 얻거나, SVG·PNG·CSS로 export합니다.

주요 기능

  • 3~9개 색 포인트 자유 배치 (위치 + 색)
  • 5가지 프리셋 + 무작위 시드 셔플
  • 블러 강도 20~300 자유 조정
  • SVG · PNG · CSS (배경 multiple radial gradient) 3가지 export
  • 1920×1920까지 고해상도 출력

활용 예시

  • 웹사이트 hero 배경 — 추상적이고 모던한 분위기
  • 앱 스플래시 화면 — 부드러운 시각적 효과
  • Notion·Linktree 배너 — 정적 사진보다 트렌디
  • 제품 광고 배경 — 텍스트 가독성 유지하면서 배경 풍부
  • 스토리북·프레젠테이션 — 슬라이드 배경

메시 그라디언트가 뭔가요?

메시 그라디언트(Mesh Gradient)는 캔버스에 여러 색 포인트를 배치하고 부드럽게 보간해 만드는 그라디언트입니다. 일반 linear/radial보다 자유로워 유기적이고 사실적인 색 흐름을 만들 수 있습니다. Adobe Illustrator의 Mesh Tool, Figma의 새 기능으로 인기를 끌었습니다. 본 도구는 SVG의 여러 <radialGradient>를 합성하고 feGaussianBlur 필터로 부드럽게 섞어 메시 효과를 구현합니다. 2024년 SaaS 랜딩 페이지 hero 영역에서 자주 보이는 트렌드입니다.

자주 묻는 질문

왜 PNG가 SVG보다 큰가요?

PNG는 픽셀 단위 raster이고 SVG는 벡터 코드 + filter라 매우 가볍습니다. 다만 SVG는 feGaussianBlur가 일부 환경에서 렌더링 차이가 있을 수 있어 PNG를 권장하는 경우가 많습니다.

CSS만으로도 가능한가요?

네, 본 도구의 CSS export가 그렇게 합니다. 여러 radial-gradient를 겹쳐 비슷한 효과를 냅니다. 다만 backdrop-filter: blur는 자식 요소에 적용해야 부드러워집니다.

고해상도 사이트에 적합한가요?

네, SVG·CSS는 해상도 무관하게 깔끔합니다. PNG는 사용 크기에 맞게 다운로드하세요(고해상도면 2배 크기).

무료?

네, 완전 무료입니다.