Gerador de fundo de padrão CSS

A maioria das ferramentas de "gerador de padrões" reutiliza silenciosamente a mesma fórmula de gradiente linear repetido para cada opção e apenas altera os números. Este não: cada um dos seis tipos de padrões aqui é construído a partir da técnica CSS específica que realmente produz aquela forma. As listras usam um único gradiente linear de repetição com duas faixas de cores. Os pontos usam um gradiente radial lado a lado puramente através do tamanho do fundo - o truque clássico dos pontos CSS - em vez de um gradiente radial repetido, que não pode colocar um ponto circular de forma limpa em uma grade retangular. O tabuleiro de damas usa a fórmula real do gradiente cônico de quatro quadrantes: um gradiente cônico centrado em um ladrilho quadrado se divide naturalmente em quatro quadrados de quadrantes em limites de 90 graus e alternando duas cores entre esses quadrantes em um tabuleiro de xadrez genuíno, não uma aproximação.

A grade e o hachura diagonal colocam dois gradientes lineares repetidos em camadas como entradas de imagem de fundo separadas, em vez de falsificar a segunda direção com truques de borda. A grade combina um gradiente de repetição "para a direita" e "para baixo" para linhas de regra horizontais e verticais nítidas. Crosshatch coloca um gradiente de repetição de +45 graus e -45 graus para uma trama diagonal no estilo basketweave - vale a pena ser preciso: esta é uma hachura honesta, não uma geometria de espinha de peixe verdadeira, e a ferramenta a rotula dessa forma, em vez de reivindicar demais. Os triângulos reutilizam a técnica de gradiente cônico de quatro cunhas do tabuleiro de xadrez, mas iniciam o gradiente girado 45 graus, o que muda os limites da cunha dos pontos médios da borda do ladrilho para 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 expõe apenas os controles que realmente se aplicam a ele - um controle deslizante de ângulo aparece para listras, o raio e o espaçamento dos pontos aparecem para os pontos, a espessura da linha aparece para grade e hachura - e a grande caixa de visualização lado a lado é repintada a cada alteração para que você 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 primitivos simples de retângulo, círculo, caminho ou polígono, pronto para colar dentro de qualquer documento SVG <defs>, com um download de um clique para um arquivo .svg independente.

Tudo é executado localmente no seu navegador: sem upload de imagens, sem ida e volta do servidor, sem conta. Para preenchimentos sólidos ou gradientes sem repetição, o gerador de gradiente CSS neste site é a ferramenta certa; este é especificamente para fundos geométricos lado a lado construídos a partir de zero recursos de imagem.