Gerador CSS Padrão Xadrez (Checker)

Padrões checker em CSS puro

O tabuleiro de damas é o padrão tileável canônico. Photoshop, GIMP, Krita e Figma usam um checker cinza com branco em 8×8 ou 16×16 como indicador universal de "essa área é transparente" — convenção tão enraizada que designers leem como "alpha" sem precisar de legenda. A mesma forma é bandeira de chegada de F1, é tabuleiro de xadrez, é o ska two-tone dos anos 60, é o tênis Vans e é tile de jogo 16-bit. Tudo isso é só duas grades de quadrados interlaçadas, e o CSS moderno resolve em uma única propriedade — sem SVG, sem imagem.

A técnica clássica do CSS-Tricks empilha quatro gradientes em 45°. Funciona, mas é verbosa. A abordagem moderna e bem mais curta usa repeating-conic-gradient, que ganhou suporte cross-browser há alguns anos:

.checker {
  background: repeating-conic-gradient(
    #000 0% 25%, #fff 0% 50%);
  background-size: 32px 32px;
}

Essas duas linhas produzem um checker perfeito de 16 px por célula. A alternativa legada — útil se você precisar suportar Safari antigo — é dois linear-gradient(45deg, ...) empilhados, um deslocado em meio tile. Os dois compilam para uma única camada acelerada por GPU; o custo de performance é essencialmente zero, mesmo em mobile.

Quando usar CSS vs SVG

Gradientes CSS ganham do <pattern> SVG para padrões simples, alinhados aos eixos e de duas cores: checker, listras puras, dots em malha. A regra inteira cabe em menos de 100 bytes e muda só com uma custom property. O SVG vence assim que a geometria fica irregular — chevrons, formas orgânicas, vários motivos sobrepostos ou quando você precisa de controle fino de stroke. Para o checker de canal alpha em um editor de foto, o CSS é a resposta certa: curto, cacheável junto com o stylesheet e trivialmente re-colorível.

Variantes e usos

• Alpha do Photoshop — cinza claro #ccc e branco, tile 8×8 px — o indicador universal de transparência.
• Bandeira de chegada — preto e branco, 32×32 ou maior; ótimo para hero block de site de automobilismo.
• Ska two-tone — preto e branco em fitas e gravadoras de música dos anos 60.
• Game UI — cores saturadas e tamanhos casados com pixel recriam aquela cara de 16-bit.
• Fundos para impressão — funciona no print porque os gradientes são rasterizados nos stylesheets de impressão.

Tamanho responsivo com custom properties

Amarre o tamanho do tile a uma variável CSS para redimensionar em runtime sem rebuild:

:root { --checker-size: 16px; }
.checker {
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: var(--checker-size) var(--checker-size);
}
@media (min-width: 1024px) { :root { --checker-size: 32px; } }

No Tailwind, use o escape de arbitrary value: bg-[repeating-conic-gradient(#000_0%_25%,#fff_0%_50%)] bg-[size:24px_24px]. Verboso, mas sobrevive ao purge porque a string toda é literal.

Perguntas frequentes

CSS ou SVG para checker? CSS para checker simples de duas cores — mais curto, uma camada só, fácil de recolorir. SVG só se você precisa de células irregulares, tamanhos diferentes por linha ou animação de rotação em quadrados individuais.

Dá pra simular o indicador de transparência do Photoshop? Sim, exatamente — o checker padrão 8×8 cinza-branco do Photoshop reproduz com repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) com tamanho 16×16 px (cada célula 8 px).

Funciona em impressão? Sim — Chrome, Safari e Firefox rasterizam gradientes em stylesheets de print, então o checker aparece igual na exportação em PDF.

Múltiplos tamanhos responsivos? Sim — controle background-size via custom property e troque por breakpoint. Sem rebuild.