Gerador de Padrão Xadrez (SVG)

O padrão xadrez: 4 mil anos de design

O padrão xadrez — duas cores contrastantes alternadas em grade n × n — é um dos motivos visuais mais antigos da humanidade. Artesãos egípcios o usavam em paredes de túmulos; a heráldica medieval o codificou como chequy; o tabuleiro 8×8 moderno vem do xadrez, que padronizou a grade por volta do século 7. Fora dos jogos, o padrão aparece na bandeira quadriculada (usada em corrida de cavalo desde 1880, na Fórmula 1 desde 1906), em pisos de cozinha industrial e na tela de transparência padrão de qualquer editor raster — o Photoshop usa uma grade cinza 32×32 (#cccccc e #ffffff) que virou o código universal para "este pixel tem alpha".

No design de UI atual, o xadrez faz três trabalhos: indica transparência em previews de imagem; carrega associações de marca racing/karting; e funciona como motivo retrô em landing pages nostálgicas. Também é referência ótima para calibrar tela, porque o olho identifica qualquer distorção geométrica na hora.

Implementação em CSS puro

A receita clássica em CSS empilha quatro linear-gradients com paradas em 45° e 135°. Defina o background-size em 2×tamanho-da-célula e a grade se repete infinitamente:

.checker {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

A alternativa em SVG usa um <pattern> com dois <rect>s — menos regras, mais fácil de escalar e pronto para exportar para impressão ou PDF.

Escolhendo tamanho de célula e contraste

Para dicas de transparência em UI, células de 8 a 32 pixels com par de baixo contraste (cinza claro + branco) é o ponto ideal — pequeno o suficiente para ser lido como "fundo", neutro o suficiente para manter o foreground legível. Abaixo de 4 px o padrão gera moiré em LCDs; acima de 64 px parece elemento de marca, não indicador de transparência. As cores não precisam ser preto e branco: qualquer par contrastante serve, mas mantenha luminâncias próximas se o padrão for ficar atrás de texto.

Padrões irmãos

• Tabuleiro de damas — mesmo layout 8×8, jogo diferente.
• Xadrez chinês (Xiangqi) — é uma grade, não um xadrez, porque as peças ficam nas interseções.
• Listras de campo de futebol — faixas alternadas em vez de grade; produzidas cortando a grama em direções opostas.
• Pied-de-poule e gingham — primos têxteis que parecem xadrez à distância mas têm detalhe de trama de perto.

Perguntas frequentes

Qual tamanho de célula usar? 8–16 px para canvases de transparência, 20–32 px para backgrounds decorativos, 40 px+ para hero banners.

Precisa ser preto e branco? Não — qualquer par contrastante funciona. Para textos por cima, escolha dois tons próximos da mesma cor para o xadrez recuar visualmente.

SVG ou gradiente CSS — qual é melhor? CSS resolve para blocos DOM de tamanho fixo. SVG escala melhor para impressão, exporta limpo para PDF e é mais fácil reusar entre documentos.

Por que o padrão tremula quando eu rolo a página? Renderização sub-pixel em telas high-DPI — aumente o tamanho da célula ou use image-rendering: pixelated no container.