O que são padrões CSS por gradiente

Padrões de fundo criados apenas com CSS existem desde que os gradientes se tornaram parte do padrão CSS3. A técnica consiste em combinar funções de gradiente (linear-gradient, radial-gradient, conic-gradient e suas variantes repeating-*) com a propriedade background-size para criar tiles que se repetem infinitamente.

A vantagem sobre imagens de fundo é zero requisição de rede, escalabilidade perfeita (vetorial), tamanho em bytes desprezível no CSS e fácil customização via variáveis.

Os 9 tipos de padrões disponíveis

A ferramenta oferece nove padrões clássicos, todos com suporte a personalização de cor e tamanho:

• Xadrez (Checkerboard), o mais popular, usa repeating-conic-gradient com intervalos de 25%.
• Listras horizontais, verticais e diagonais, três variações baseadas em repeating-linear-gradient com ângulos 0°, 90° e 45°.
• Pontos (Dots), círculos uniformes via radial-gradient com raio proporcional ao tamanho do tile.
• Grade (Grid), dois gradientes perpendiculares criando linhas de 1px.
• Triângulos, três gradientes a 120°, 240° e 0° com offsets de posição.
• Hexágonos, gradientes a 60° com tiles deslocados (honeycomb).
• Ziguezague, quatro gradientes a 135°, 225°, 315° e 45° com offsets negativos.

Como o CSS de padrão funciona

O princípio é sempre o mesmo: definir um tile pequeno com a geometria desejada e deixar o browser repeti-lo via background-repeat: repeat (padrão). O tamanho do tile é controlado por background-size. Quanto menor o tile, mais denso o padrão; quanto maior, mais espaçado.

A opacidade do padrão é implementada via rgba() na cor de padrão, permitindo que o fundo transparece parcialmente mesmo sem alterar a cor base.

A ferramenta aplica a opacidade convertendo o hex para rgba e passando o alpha desejado, o que é mais eficiente do que usar opacity no elemento (que afetaria também o conteúdo filho).

O papel do background-size

A propriedade background-size define a dimensão do tile. Para padrões quadrados, usa-se NNpx NNpx. Para hexágonos (tiles retangulares), a altura é calculada como size × √3/2 × 2 (a altura de um hexágono regular). O gerador faz todos esses cálculos automaticamente, bastando arrastar o slider de tamanho.

No caso dos hexágonos, dois layers de gradiente com background-position deslocado criam o efeito colmeia. No ziguezague, quatro layers com posições negativas formam os dentes da serra.

Quando usar padrões CSS

Padrões de fundo são ideais para:

• Seções de hero com baixo contraste que precisam de textura visual
• Cards e widgets que precisam de distinção visual sem cor sólida
• Áreas de upload ou drop zones (xadrez semitransparente é padrão do Figma e Photoshop)
• Placeholders de imagem antes do carregamento
• Backgrounds decorativos em landing pages

Evite padrões muito densos em textos longos, use-os como fundo de containers, não de páginas inteiras com muito conteúdo.

Perguntas frequentes

Preciso de prefixos para repeating-conic-gradient? Não. O suporte é universal desde 2022 (Chrome 69+, Firefox 83+, Safari 12.1+).

Posso usar mais de duas cores? Sim, mas o gerador atual usa duas cores para simplicidade. Edite o CSS gerado manualmente adicionando mais paradas de cor nos gradientes.

O padrão afeta a performance? Minimamente. O browser pinta o tile uma vez e repete via GPU, tornando o custo de rendering equivalente a uma imagem simples.

Como animar o padrão? Anime background-position com @keyframes. Por exemplo, incrementar a posição X cria um efeito de movimento horizontal infinito.