Gerador de padrões CSS
Crie padrões de fundo em CSS puro: bolinhas, grade, linhas, listras diagonais, xadrez, zigue-zague, cruzes, losangos. Cores e tamanhos ajustáveis, sem imagem.
- Grátis
- Sem cadastro
- Nenhum arquivo enviado
- Windows, Mac, Android, iPhone
Carregando a ferramenta…
Sobre esta ferramenta
Vista seus fundos com padrões geométricos em CSS puro: bolinhas, papel milimetrado, linhas de caderno, listras diagonais, xadrez, zigue-zague, cruzes e losangos. Ajuste as duas cores, o tamanho e a espessura e copie o código: sem imagem para hospedar.
Quando usar
Fundos de seções
Uma grade bem clara ou bolinhas discretas dão personalidade a um fundo sem atrapalhar a leitura.
Áreas de soltar e estados vazios
Listras diagonais sinalizam uma área de arrastar e soltar ou um espaço vazio.
Mockups e apresentações
Um padrão leve evita fundos brancos vazios demais num mockup.
Como usar
- Escolha um padrão.
- Ajuste as cores, o tamanho e a espessura.
- Copie o código CSS do fundo.
Como funciona
Cada padrão é feito de um ou mais degradês cujas cores mudam de uma vez (sem transição), desenhando formas nítidas. background-size define o tamanho do bloco que se repete.
A prévia aplica exatamente o código gerado; as miniaturas de seleção são geradas com suas cores.
Dicas para um melhor resultado
- Mantenha pouco contraste entre as duas cores para um fundo atrás de texto.
- Um tamanho de 16 a 32 px serve para a maioria dos fundos.
- Evite padrões muito apertados e contrastados: podem criar efeito moiré.
- Combine um padrão com um degradê transparente para esmaecê-lo.
Problemas comuns e soluções
O padrão tremula ao rolar
Padrões finos e contrastados criam moiré: aumente o tamanho ou diminua o contraste.
As linhas ficam borradas
Com espessura decimal ou zoom, as bordas suavizam. Use espessuras em pixels inteiros.
O padrão não cobre o bloco todo
Confira se o elemento tem altura: um bloco vazio com altura 0 não mostra nada.
Perguntas frequentes
Por que padrões CSS em vez de imagens?
Eles não precisam carregar arquivo, ficam nítidos em todas as telas e mudam editando duas cores no código.
Como são feitos?
Com degradês CSS (linear-gradient, radial-gradient, conic-gradient) com paradas de cor secas, repetidos com background-size.
Posso combinar com uma cor de fundo?
Sim, a cor de fundo faz parte do código. O padrão também pode ficar sobre uma imagem adicionando uma camada em background-image.
Funcionam em todo lugar?
Sim, em todos os navegadores recentes; o xadrez usa conic-gradient, suportado em todo lugar desde 2020.
Pesquisas relacionadas
Ainda com problema?
Pergunte no fórum: a categoria, a ferramenta, a ficha do seu dispositivo e o resultado do teste são preenchidos para você.