Gerador de blobs e padrões de fundo SVG

O gerador de blobs e padrões de fundo SVG combina duas ferramentas em uma: um gerador de formas orgânicas aleatórias (blob, como blobmaker.app) com controle sobre número de pontos, aleatoriedade e cor, e um gerador de padrões de fundo SVG sem emendas (pontos, grade, linhas diagonais, ondas) com controle sobre tamanho do bloco, espessura da linha, cor e cor de fundo. Copie o código SVG bruto diretamente, copie-o como uma declaração CSS background-image pronta para uso, ou baixe como um arquivo .svg independente. Toda a geração acontece no seu navegador por meio de cálculos matemáticos puros — nada é enviado a um servidor.

Ferramentas de Design e CSS Funciona totalmente no seu navegador

O gráfico é gerado totalmente no seu navegador — nada é enviado a um servidor.

Número de pontos8Aleatoriedade30%Cor

Código SVG

<svg width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg"><path d="M 112.62 -48.05 Q 129.15 0.00 94.34 29.77 Q 59.54 59.54 29.77 90.76 Q 0.00 121.98 -54.67 115.66 Q -109.34 109.34 -131.53 54.67 Q -153.72 0.00 -113.72 -36.85 Q -73.71 -73.71 -36.85 -100.92 Q -0.00 -128.12 48.05 -112.11 Q 96.09 -96.09 112.62 -48.05 Z" fill="#6366f1" /></svg>

Perguntas Frequentes

Sim, no modo padrão há uma declaração CSS background-image pronta para copiar diretamente em uma folha de estilos.

Continuar com

Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Conversor de Cores

Converta uma cor entre os formatos HEX, RGB, e HSL instantaneamente.

Ferramentas para DesenvolvedoresAbrir ferramenta

Totalmente local

Gerador de Favicon

Gere um conjunto completo de tamanhos de favicon a partir de uma única imagem.

Ferramentas de ImagemAbrir ferramenta

Ferramentas relacionadas

Totalmente local

Gerador de animações CSS Keyframe

Crie uma animação CSS visualmente (aparecer, deslizar, zoom, saltar, girar, virar) e obtenha código @keyframes pronto para uso.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de harmonia de paleta de cores

Escolha uma cor base e obtenha uma paleta de cores harmoniosa (complementar, análoga, tríade, tétrade, monocromática).

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Gradiente Mesh

Crie um fundo de gradiente mesh suave e multiponto com um clique, e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Verificador de Contraste de Cores

Verifique se um par de cores texto/fundo atende aos padrões de contraste de acessibilidade WCAG.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta

Pronto para experimentar o Uddatak?

Explore a biblioteca completa de ferramentas e comece a usar o que você precisa agora — grátis, sem cadastro.

Ver todas as ferramentas