Gerador de padrões CSS
Crie padrões de fundo em CSS puro – pontos, bolinhas, listras, xadrez, grade, zigue-zague e hachurado – com cores, tamanho do bloco e espessura. Sem imagens.
Configurações do padrão
Pré-visualização
background-color: #ffffff; background-image: radial-gradient(#6366f1 2px, transparent 2px); background-size: 20px 20px;
Ferramentas Relacionadas
Ver TodasO que é Gerador de padrões CSS?
Gera padrões de fundo repetidos usando apenas gradientes CSS, então nenhum arquivo de imagem é necessário. Escolha um padrão, duas cores, o tamanho do bloco e a espessura das linhas ou dos pontos e copie as declarações de fundo resultantes.
Como usar Gerador de padrões CSS
- Escolha um padrão: Pontos, Bolinhas, Listras, Xadrez, Grade, Zigue-zague ou Grade hachurada.
- Defina a cor do padrão e a cor de fundo.
- Ajuste o tamanho do bloco e a espessura (raio do ponto, largura da listra ou da linha) e, nas listras, o ângulo.
- Confira a prévia.
- Copie o código CSS.
Exemplo
Checkerboard, tile 40px, pattern #000000 on #ffffff
background-color: #ffffff; background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%); background-size: 40px 40px;
Quando usar Gerador de padrões CSS
Use padrões CSS para fundos de página sutis, placeholders, efeitos de papel quadriculado e seções decorativas; eles escalam perfeitamente e não custam nenhuma requisição HTTP. Para artes repetidas complexas ou ilustrativas, um bloco SVG é mais flexível.
Como funciona Gerador de padrões CSS
Cada padrão é um background-color mais um ou mais gradientes repetidos por background-size. Os pontos usam radial-gradient(color r, transparent r); as bolinhas acrescentam uma segunda camada deslocada via background-position. As listras usam repeating-linear-gradient com paradas de cor duras; o xadrez usa repeating-conic-gradient(color 0% 25%, transparent 0% 50%); as grades combinam um gradiente linear horizontal e um vertical; o zigue-zague é feito de quatro triângulos de 45°. A espessura é limitada ao tamanho do bloco.
Casos de Uso Comuns
- Fundos de papel quadriculado para editores e diagramas
- Fundos de destaque com pontinhos sutis
- Barras listradas de aviso ou de progresso
- Xadrez de transparência atrás de imagens
- Fundos de seção retrô em zigue-zague
Perguntas Frequentes
Esses padrões funcionam em todos os navegadores?
Sim, nos navegadores atuais. O xadrez depende de gradientes cônicos, suportados por todos os principais navegadores desde 2020.
Posso usar um fundo transparente?
Sim, informe transparent ou uma cor rgba()/oklch() com alfa como cor de fundo.
Por que usar CSS em vez de uma imagem?
Padrões CSS independem de resolução, são minúsculos e fáceis de recolorir com variáveis, sem nenhum arquivo extra para baixar.