Gerador de padrões de fundo
Background Pattern Generator
Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.
Desenha um padrão de fundo sem emenda — pontos, grade, listras, xadrez, cruzes, triângulos ou ondas — e o devolve como um data URI CSS, um arquivo SVG ou um fragmento `<pattern>` para colar em um documento existente. A rotação é aplicada como `patternTransform`, então o ladrilho continua sem emenda em vez de quebrar nas próprias bordas.
Padrão
O padrão mais discreto que existe. Mantenha o ponto abaixo de um quinto do ladrilho, senão ele se lê como textura e não como padrão.
Resultado
450 bytes como URI codificado em URL contra 526 como Base64.
Codificado em URL em vez de Base64: aqui fica 14% menor e continua legível na folha de estilos. O codificador de SVG para data URI faz o mesmo com qualquer SVG.
Como usar
Escolha a forma
Cada uma diz para que serve. Pontos são os mais discretos; uma grade é legível atrás de um diagrama e distrai atrás de texto; listras diagonais são o preenchimento de “em construção” que todo mundo reconhece.
Defina o tamanho do ladrilho e o peso
O peso é uma fração do ladrilho, e não um valor em pixels, então o padrão mantém o seu caráter quando você redimensiona o ladrilho. Acima de cerca de um quinto, a forma deixa de se ler como padrão e passa a se ler como textura.
Mantenha o contraste baixo
Esta é a decisão que faz ou desfaz um fundo. Um padrão que é visível normalmente já está forte demais: escolha um primeiro plano um ou dois passos distante do fundo em vez de uma cor contrastante, e confira-o atrás de texto real antes de publicar.
Pegue o CSS, o arquivo ou o fragmento
O CSS é um data URI codificado como URL, pronto para `background-image`. O arquivo SVG é para qualquer lugar em que um URI não sirva. O fragmento `<pattern>` vai dentro de um `<svg>` existente e é referenciado como `fill="url(#p)"`.
Perguntas frequentes
Ele repete sem emenda?
Sim, e essa é a parte para a qual a geometria está trabalhando. As listras diagonais são desenhadas como três cópias com quebra de volta, para que a diagonal continue através da borda do ladrilho, e a onda são dois segmentos cúbicos casados em inclinação na junção. A rotação passa por `patternTransform` pelo mesmo motivo — girar a geometria dentro do ladrilho deixaria pontas cortadas na fronteira.
Posso exportar um PNG?
Aqui, não. A saída é SVG em três embalagens, que é independente de resolução e uma fração do tamanho — um padrão de pontos tem algumas centenas de bytes como data URI e teria alguns kilobytes como ladrilho PNG. Se um raster é obrigatório, baixe o SVG e rasterize-o.
Um padrão de fundo prejudica o desempenho?
Raramente, mas há um caso real: um ladrilho muito pequeno sobre uma área muito grande faz o compositor repeti-lo muitíssimas vezes, e em um celular de entrada isso aparece na rolagem. Se uma página parece pesada com um padrão, experimente um ladrilho maior com a mesma densidade aparente.
Posso usar um padrão como textura sobre uma imagem?
Sim — ligue o fundo transparente e o ladrilho carrega só as formas de primeiro plano, então o que estiver atrás aparece. Empilhe-o como uma segunda camada de `background-image` acima da foto.
Pode receber de
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Gerador de imagem para redes sociais
Social Card Generator
Compõe uma imagem de compartilhamento de 1200×630 a partir de título, subtítulo, linha de marca e logotipo opcional num modelo escolhido, e escreve as meta tags que a acompanham.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Gerador de imagem para redes sociais
Social Card Generator
Compõe uma imagem de compartilhamento de 1200×630 a partir de título, subtítulo, linha de marca e logotipo opcional num modelo escolhido, e escreve as meta tags que a acompanham.
SVG para data URI de CSS
SVG to CSS Data URI
Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.
Otimizador de SVG
SVG Optimiser
Remove sobras de editor, achata transformações e arredonda a precisão dos caminhos, mostrando a diferença renderizada.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.