Gerador de Fundos com Padrões

CSS puro, sem arquivos de imagem

Cada padrão é desenhado com gradientes CSS sobre uma background-color sólida. Você não precisa hospedar uma imagem separada nem fazer outra requisição HTTP para carregá-la. Um padrão de bolinhas, por exemplo, fica assim:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

O CSS repete o motivo por toda a superfície. O espaçamento controla a densidade do padrão, não a espessura de todas as linhas nem o tamanho de todos os pontos. Certos níveis de zoom ou pixels fracionários podem revelar junções muito finas nas bordas da repetição.

Do que é feito cada motivo

Dicas de cor e contraste

• Mantenha o contraste baixo para fundos. Uma cor do padrão próxima da cor de fundo aparece como uma textura sutil e profissional. Alto contraste compete com o seu conteúdo de verdade.
• Combine com a sua marca. Use uma cor da marca como cor do padrão em vez de cinza simples, para que a textura se conecte à sua identidade.
• Modo escuro. Troque por uma cor de fundo escura e uma cor do padrão um pouco mais clara. Padrões de contraste total ficam ruidosos em superfícies escuras.
• Confira o texto sobre as duas cores. Um contraste baixo entre as cores do fundo não garante contraste suficiente com o texto. Teste a cor do texto tanto sobre o fundo quanto sobre o padrão. Esta ferramenta não verifica conformidade com WCAG.

Onde usar

• Fundos de cabeçalhos e seções que precisam de um pouco de textura sem uma imagem.
• Cartões e painéis em um painel de controle, onde uma grade ou bolinhas suaves dão estrutura.
• Estados vazios e espaços reservados, onde o xadrez oferece uma referência visual conhecida.
• Layouts com cara de impressão e slides que pedem um ar de papel milimetrado ou hachura.

Como a saída é apenas CSS, ela não exige uma requisição separada de imagem. Depois, você pode ajustar o código nas ferramentas de desenvolvedor do navegador.