Design / CSS

Gerador de padrões CSS (listras, pontos, grade e xadrez)

Crie padrões de fundo repetidos usando apenas gradientes CSS: listras, listras diagonais, linhas de grade, pontos, xadrez e zigue-zague, com suas próprias duas cores, tamanho e espessura de linha. Depois, copie o CSS.

Gerador de padrões CSS (listras, pontos, grade e xadrez): Cada padrão usa um ou dois gradientes CSS que se repetem no tamanho escolhido: repeating-linear-gradient para listras, dois gradientes lineares cruzados para uma grade, radial-gradient para pontos e repeating-conic-gradient para um padrão xadrez. Não há nenhum arquivo de imagem, então o padrão permanece nítido em qualquer nível de zoom e não custa nada para carregar. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Gerador de padrões CSSProcessamento local

Roda inteiramente no seu navegador

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Cada padrão é desenhado apenas com gradientes CSS, portanto não há nenhuma imagem para baixar, ele permanece nítido em qualquer nível de zoom e as cores podem ser alteradas na folha de estilos. Mantenha os padrões atrás do texto sutis: o baixo contraste entre as duas cores mantém o texto legível.

Como um tabuleiro de damas é desenhado

repeating-conic-gradient(#000 0 25%, transparent 0 50%) pinta o primeiro e o terceiro quartos de uma volta ao redor do centro de cada bloco, criando dois quadrados diagonais por bloco; background-size define o bloco com o dobro do tamanho do quadrado.

Combinando padrões

As imagens de fundo são empilhadas: liste um gradiente do gerador de gradientes CSS depois de um padrão, separados por uma vírgula, e o padrão ficará sobre o gradiente.

Como usar

  1. Escolha um padrão.
  2. Defina as duas cores, o tamanho da repetição e a espessura da linha ou o tamanho dos pontos.
  3. Copie o CSS.

Privacidade e limitações

Tudo é executado no seu navegador.

Ferramentas relacionadas

Gradiente CSSonda SVGGlassmorphism

Perguntas frequentes

Os padrões funcionam em todos os navegadores?

Sim: todos os navegadores atuais são compatíveis com esses gradientes, incluindo o gradiente cônico usado no padrão xadrez.

Como coloco um padrão atrás do texto?

Escolha duas cores próximas para que o padrão fique discreto e o texto mantenha contraste suficiente.

Posso alterar o ângulo das listras?

Sim: edite o ângulo em repeating-linear-gradient no CSS copiado, usando, por exemplo, 60deg em vez de 45deg.

Ferramenta grátis · no seu navegador execuções · não precisa de conta