Como usar: Gerador de Blob SVG
- Clique em Novo blob aleatório até gostar da forma.
- Use Complexidade para mais ou menos curvas e Aleatoriedade para um contorno mais redondo ou mais irregular.
- Escolha uma cor sólida, um gradiente ou um contorno.
- Baixe em SVG (escala para qualquer tamanho) ou PNG, ou copie o código SVG para o seu HTML.
Como os blobs são criados
O gerador posiciona pontos ao redor de um círculo, move cada um para dentro ou para fora em uma quantidade aleatória e os conecta com uma curva fechada suave (segmentos de Bézier cúbica passando por todos os pontos). Mais pontos geram mais curvas; mais aleatoriedade deixa o contorno menos circular. O resultado é um único <path> — leve, nítido em qualquer tamanho e fácil de mudar de cor.
Usando blobs em um site
- Decoração de fundo: posicione o SVG de forma absoluta atrás de uma seção de destaque, com cor suave ou baixa opacidade.
- Máscaras de imagem: use o blob como
mask-imageou transforme o path emclip-path: path()para recortar uma foto no formato da forma. - Animação: gere dois blobs com a mesma complexidade e anime a transição entre eles com CSS ou SMIL para um efeito de "morphing".
Precisa de uma forma apenas com CSS? O Gerador de Border Radius cria blobs com 8 valores de raio. Para divisores de seção, experimente o Gerador de Ondas SVG.
Também pesquisado como: gerador de blob, gerador de forma blob, gerador de forma orgânica, blob svg aleatório, criar blob svg, gerador de forma svg, gerador de forma abstrata.
Ferramentas que combinam com: Gerador de Blob SVG
- Gerador de Clip-path CSS — Recorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono, estrela, seta, chevron, balão de fala, círculo, elipse, retângulo arredondado… — e depois arraste os pontos sobre um exemplo ou sobre a sua própria imagem.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Otimizador SVG — Limpe SVGs exportados do Figma, Illustrator, Inkscape ou Sketch com o SVGO e confira a pré-visualização antes e depois para garantir que o ícone continue certo.
- Conversor de SVG para PNG — Converta gráficos vetoriais SVG em imagens PNG nítidas, exatamente no tamanho que você precisa — para lojas de aplicativos, redes sociais, e-mail ou documentos.
Perguntas frequentes
Como faço uma forma blob?
Clique em Novo blob aleatório, ajuste a complexidade e a aleatoriedade e baixe o SVG. Cada blob é um único path suave.
Posso usar os blobs comercialmente?
Sim. As formas são geradas aleatoriamente no seu dispositivo — use em qualquer projeto, sem necessidade de atribuição.
Como coloco uma imagem dentro de um blob?
Use o SVG como máscara CSS (mask-image: url(blob.svg)) na imagem, ou copie o path para um clipPath do SVG.
SVG ou PNG?
SVG para sites — fica nítido em qualquer tamanho e é muito leve. PNG para apps que não aceitam SVG, como algumas ferramentas de apresentação ou redes sociais.
Posso instalar o Gerador de Blob SVG como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Blob SVG é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.