블롭(Blob) SVG. Z세대·뉴모피즘·랜딩페이지 트렌드.
🫧 미리보기 (재생성 = 새 모양)

사용법

  1. 꼭지점 수 (3~20개)와 불규칙도 조정
  2. 그라데이션 또는 단색 선택
  3. 두 색상 지정 → 자동 부드러운 보간
  4. 회전·크기로 미세 조정
  5. "재생성"으로 무한 변형, SVG/PNG 다운로드

주요 기능

  • 꼭지점 3~20개, 불규칙도 0~80% 자유 조정
  • 그라데이션 (선형) 또는 단색
  • 5가지 프리셋 (핑크보라·시안블루·노랑주황·그린·다크)
  • 재생성으로 무한 변형 (시드 랜덤)
  • SVG/PNG 둘 다, 투명 배경 지원

활용 예시

  • 랜딩페이지 배경 — Z세대 어필 디자인
  • SNS 프로필 배경 — 부드러운 인상
  • 앱 스크린 디자인 — 뉴모피즘 카드 뒤
  • 발표 자료 — 단조로움 탈출
  • 로고 배경 — 부드러운 형태 강조

블롭(Blob)이란?

블롭(Blob)은 직선이 없는 불규칙한 둥근 형태로, 유기적·부드러운·친근한 느낌을 줍니다. 2020년대 디자인 트렌드의 핵심으로, Apple·Stripe·Linear·Notion 같은 회사들이 랜딩페이지에 적극 사용합니다. 기존의 딱딱한 직사각형 박스 디자인과 대비되어 시선을 끌고, Z세대에게 친근한 인상을 줍니다.

자주 묻는 질문

매번 다른 모양인 이유?

의도된 랜덤성입니다. 꼭지점 위치가 매번 변동되어 같은 설정이라도 다른 블롭이 나옵니다. "재생성" 버튼으로 마음에 드는 결과를 찾으세요.

CSS clip-path로 쓸 수 있나요?

네, SVG의 path d 값을 `clip-path: path('M ...')` 로 사용하면 됩니다. CSS clip-path 변환은 SVG 다운로드 후 path 추출.

여러 블롭 겹치기?

SVG 여러 개 다운로드 → Figma/Illustrator에서 겹치기. 또는 PNG로 받아서 Photoshop 레이어.

무료인가요?

네, 회원가입 없이 무료입니다.