Gerador de Padrão CSS Repetitivo

Patterns CSS: backgrounds repetitivos sem imagem

Um pattern CSS é um background repetitivo construído inteiramente com gradients CSS, sem nenhum arquivo de imagem. A técnica foi popularizada por Lea Verou na lendária CSS3 Patterns Gallery de 2010 e virou parte do vocabulário do design web desde então. Como o pattern é renderizado pelo paint pipeline nativo do browser, ele é independente de resolução, pesa quase nada em bytes e escala perfeitamente em telas retina sem precisar servir vários assets raster.

Os dois blocos básicos são linear-gradient e radial-gradient, cada um com uma variante repeating- que faz o tiling sozinha. Listras diagonais, por exemplo, são uma linha:

background:
  repeating-linear-gradient(45deg,
    #ffffff 0 10px,
    #1f2937 10px 20px);

Receitas de patterns comuns

• Listras — um repeating-linear-gradient, em qualquer ângulo.
• Xadrez — dois linear-gradient a 90° entre si, com background-size definindo a célula.
• Pontos / polka dots — um único radial-gradient com background-size para espaçamento.
• Plus / cruz — duas listras finas em linear-gradient sobrepostas a 90°.
• Diamante / espinha-de-peixe — pilhas de gradients com background-position deslocado.
• Grid — perfeito para telas de design; um gradient horizontal e outro vertical.
• Conic / fatias — conic-gradient moderno para raios de sol e gráficos de pizza.

CSS pattern vs SVG vs PNG

Para tiles geométricos simples — listras, pontos, grid, xadrez — o CSS puro ganha em todos os eixos: sem requisição HTTP, escalonamento perfeito, fácil de ajustar via custom properties. SVG entra quando o motivo envolve curvas, paths ou shapes complexos (ondas, hexágonos com cantos arredondados, ícones customizados), e galerias como heropatterns.com vivem nesse território. PNG repetido raramente é a resposta certa em 2026 — perde nitidez em retina, custa uma requisição e é maior que o equivalente em CSS quase sempre.

Transparência e custom properties

Gradients aceitam valores rgba() e color-mix(), então dá para pintar um pattern sobre um background fotográfico mantendo a imagem legível. Plugar as cores em custom properties torna temas triviais:

.dots {
  --c: #3b82f6;
  background: radial-gradient(var(--c) 2px, transparent 2px);
  background-size: 16px 16px;
}

Tailwind e valores arbitrários

Tailwind v3+ suporta a sintaxe de valor arbitrário em qualquer utility. Você consegue jogar um pattern direto na lista de classes:

<div class="bg-[radial-gradient(theme(colors.blue.500)_2px,transparent_2px)] bg-[length:16px_16px]"></div>

Perguntas frequentes

Pattern CSS suporta transparência? Sim — gradients aceitam rgba(), então dá para sobrepor um pattern a uma foto ou gradient sem esconder a camada de baixo.

Imprime corretamente? Quase sempre — a maioria dos browsers respeita o print de backgrounds se o usuário habilitar "Gráficos de fundo". Para impressos, use print-color-adjust: exact para manter o pattern visível.

É mais leve que PNG repetido? Quase sempre — um pattern CSS tem algumas dezenas de bytes dentro do seu stylesheet e não gera requisição HTTP, enquanto um tile PNG custa pelo menos um kilobyte e mais uma requisição.

Dá para fazer patterns hexagonais ou com curvas? Hexágono é possível com três gradients empilhados, mas qualquer coisa com curvas suaves é melhor servida por um tile SVG do heropatterns.com ou de uma galeria parecida.