SVG 메시 그라데이션. 벡터 = 무한 확대 + 작은 파일.
🎨 미리보기
사용법
- 4가지 색 선택 (4모서리)
- 가로/세로 사이즈 설정
- 블러로 부드러움 조정 (80 권장)
- SVG 또는 PNG 다운로드
- SVG는 웹사이트에 직접 임베드 가능
주요 기능
- SVG filter blur 기반 (벡터)
- 4색 radial-gradient 합성
- 5가지 프리셋
- 무한 확대 가능 (벡터)
- CSS·HTML 직접 임베드 가능
활용 예시
- 웹사이트 배경 SVG — 파일 크기 작음
- 인쇄용 — 무한 확대로 깨지지 않음
- Figma·Illustrator — 벡터 편집
- SVG 마스크 — 텍스트·도형 배경
- 이메일 — SVG는 일부 클라이언트 지원
SVG vs PNG 메시 그라데이션
이 도구의 SVG 출력은 진정한 벡터입니다. 메시 그라데이션을 4개의 radial-gradient로 표현하고 feGaussianBlur로 합성. 장점: (1) 작은 파일 (~2KB) (2) 무한 확대 (3) CSS로 색 변경 가능. 단점: 일부 구형 브라우저 SVG filter 지원 제한. 안전하게 쓰려면 PNG도 같이 제공.
자주 묻는 질문
mesh-gradient 도구와 차이?
mesh-gradient는 PNG (래스터), 이건 SVG (벡터). 용도에 따라 선택.
SVG 임베드 방법?
"SVG 복사" → HTML에 직접 붙여넣기. 또는 `<img src="mesh.svg">`로 참조.
SVG에서 색 변경?
SVG 파일 열어서 `stop-color` 값 변경. CSS 변수로도 가능.
무료?
네.