Padrão de Fundo CSS

O gerador de padrões de fundo CSS é uma ferramenta online que cria padrões de fundo CSS puros e sem emendas usando gradientes CSS. Ele suporta cinco tipos de padrões: pontos, grade, diagonal, zigue-zague e ondas. Todos os padrões são gerados inteiramente com CSS — sem necessidade de imagens — tornando-os leves, escaláveis e independentes de resolução.

Selecione um tipo de padrão no menu suspenso e ajuste a cor do primeiro plano, a cor de fundo e o tamanho do padrão usando os controles. A área de visualização é atualizada em tempo real para que você possa ver exatamente como seu padrão fica. Quando estiver satisfeito, clique no botão Copiar para copiar o código CSS gerado para a área de transferência.

Cinco tipos de padrões estão disponíveis: Pontos (um padrão de círculos repetidos usando radial-gradient), Grade (uma grade cruzada usando duas camadas de linear-gradient), Diagonal (linhas diagonais a 45 graus usando repeating-linear-gradient), Zigue-zague (um padrão em zigue-zague usando quatro camadas de linear-gradient) e Ondas (um padrão ondulado usando círculos radial-gradient deslocados).

Use o seletor de cor do primeiro plano para definir a cor das linhas ou pontos do padrão e o seletor de cor de fundo para a cor base atrás do padrão. O controle deslizante de tamanho controla o espaçamento da repetição do padrão — valores menores criam padrões mais densos, enquanto valores maiores produzem designs mais espaçados. Experimente diferentes combinações de cores e tamanhos.

O código CSS copiado pode ser colado diretamente em qualquer folha de estilo ou estilo inline. Aplique-o a qualquer elemento HTML usando uma classe ou estilo inline. Esses padrões funcionam bem para fundos de seções, acentos de cartões, áreas hero e divisórias decorativas. Sendo CSS puro, não adicionam solicitações HTTP extras e escalam perfeitamente em todas as densidades de tela.