Gerador de Fundos com Padrões CSS

A maioria das ferramentas de "gerador de padrões" reutiliza discretamente a mesma fórmula repeating-linear-gradient para todas as opções e apenas muda os números. Esta não: cada um dos seis tipos de padrão aqui é construído com a técnica CSS específica que realmente produz aquela forma. Listras usam um único repeating-linear-gradient com duas faixas de cor. Pontos usam um radial-gradient ladrilhado exclusivamente através de background-size — o truque clássico de pontos em CSS — em vez de um repeating-radial-gradient, que não consegue ladrilhar um ponto circular de forma limpa numa grelha retangular. Xadrez usa a verdadeira fórmula de quatro quadrantes com conic-gradient: um gradiente cónico centrado num ladrilho quadrado divide-se naturalmente em quatro quadrantes quadrados nas fronteiras de 90 graus, e alternar duas cores nesses quadrantes forma um xadrez genuíno, não uma aproximação.

Grelha e trama diagonal sobrepõem dois repeating-linear-gradients como entradas separadas de background-image, em vez de simular a segunda direção com truques de borda. Grelha combina um gradiente repetitivo "para a direita" e um "para baixo" para linhas de regra horizontais e verticais nítidas. Trama sobrepõe um gradiente repetitivo a +45° e outro a -45° para um entrançado diagonal tipo cestaria — vale a pena ser preciso: trata-se de uma trama honesta, não de uma geometria espinha de peixe verdadeira, e a ferramenta rotula-a assim em vez de prometer mais do que oferece. Triângulos reutilizam a técnica de quatro cunhas com conic-gradient do xadrez, mas iniciam o gradiente rodado 45 graus, o que desloca os limites das cunhas dos pontos médios das bordas do ladrilho para os seus cantos e transforma as mesmas quatro cunhas em quatro triângulos de canto a canto, em vez de quatro quadrantes quadrados.

Cada tipo de padrão mostra apenas os controlos que realmente se aplicam — um slider de ângulo aparece para listras, raio do ponto e espaçamento para pontos, espessura da linha para grelha e trama — e a grande caixa de pré-visualização lado a lado é redesenhada a cada alteração, para que possa ver várias repetições completas antes de confirmar um valor. Mude o modo de saída para SVG e o mesmo padrão reaparece como um elemento <pattern> construído a partir de primitivas simples de rect, circle, path ou polygon, pronto para colar dentro do <defs> de qualquer documento SVG, com download com um clique para um ficheiro .svg independente.

Tudo é executado localmente no seu browser: sem uploads de imagens, sem pedidos ao servidor, sem conta. Para preenchimentos sólidos ou gradientes sem repetição, o gerador de gradientes CSS deste site é a ferramenta correta; esta é especificamente para fundos geométricos ladrilháveis criados a partir de zero recursos de imagem.