Gerador de Padrões de Fundo em CSS

Esta ferramenta gera padrões de fundo repetidos usando apenas gradientes CSS — sem necessidade de ficheiros de imagem. Escolhe bolinhas, riscas diagonais, um padrão de xadrez ou linhas de grelha, ajusta as cores e o espaçamento, e copia o CSS de background-image diretamente para a tua folha de estilos.

O que é esta ferramenta?

O CSS consegue desenhar padrões repetidos sem quaisquer ficheiros de imagem, usando gradientes — radial-gradient() e linear-gradient() — como background-image, combinados com um background-size mais pequeno do que o elemento, para que o gradiente se repita em mosaico. As bolinhas usam um repeating radial-gradient, as riscas e o xadrez usam linear-gradient() repetido ou em camadas, e as linhas de grelha usam duas linhas de linear-gradient() sobrepostas.

Esta ferramenta constrói essas declarações de gradiente por ti. Escolhe um tipo de padrão, ajusta a cor do padrão, a cor de fundo e o espaçamento, e vê a pré-visualização ao vivo a atualizar-se — depois copia o CSS exato de background-image e background-size.

Fonte: CSS Images Module Level 3, W3C — define repeating-linear-gradient() e repeating-radial-gradient(), as funções a partir das quais estes padrões são construídos.

Por que usar?

Sem ficheiros de imagem, sem pedidos HTTP — o padrão é CSS puro e renderiza-se instantaneamente em qualquer resolução, incluindo ecrãs retina/alta densidade.
Cor e espaçamento totalmente ajustáveis, sem precisares de escrever sintaxe de gradiente à mão nem calcular a matemática do mosaico.
A pré-visualização ao vivo mostra o padrão repetido exato antes de copiares fosse o que fosse.
Escala de forma perfeita, por ser matemática vetorial e não uma imagem rasterizada — sem desfoque quando o elemento é redimensionado.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Escolhe um tipo de padrão: bolinhas, riscas diagonais, xadrez ou linhas de grelha.
Escolhe a cor do padrão e a cor de fundo que aparece entre/atrás das formas do padrão.
Ajusta o controlo de tamanho para tornar os pontos, riscas ou células da grelha maiores ou mais pequenos — isto também controla quão densamente o padrão se repete.
Copia o CSS gerado e cola-o como o background-image (e o background-size/background-position, quando indicados) de qualquer elemento.

Exemplo

Entrada

Padrão: bolinhas · Cor: azul · Fundo: branco · Tamanho: 24px

Resultado

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Um padrão clássico de bolinhas claras, frequentemente usado como fundo subtil de uma secção ou textura de um cartão.

Como cada padrão é construído

Bolinhas: um radial-gradient() desenha um pequeno círculo preenchido, e depois o background-size faz com que se repita como uma grelha de pontos em mosaico.
Riscas diagonais: um repeating-linear-gradient() a 45 graus alterna entre a cor do padrão e a cor de fundo a um intervalo fixo.
Xadrez: duas camadas de linear-gradient() a 45 graus, desfasadas entre si em meio bloco, produzem quadrados claros/escuros alternados.
Linhas de grelha: duas linhas finas de linear-gradient() — uma horizontal e outra vertical — dispostas em mosaico com o espaçamento escolhido, formando uma grelha semelhante a papel quadriculado.

Quando usar padrões em CSS em vez de ficheiros de imagem

Um padrão em gradiente CSS não tem tamanho de ficheiro nem pedido HTTP, por isso carrega instantaneamente e nunca fica desfocado em ecrãs de alta densidade, ao contrário de uma imagem PNG rasterizada em mosaico. É ideal para texturas subtis atrás de texto, divisores de secção, ilustrações de estados vazios ou cartões provisórios. Para padrões ilustrados ou fotográficos complexos, uma imagem real continua a ser a ferramenta certa — os gradientes CSS são mais adequados a formas simples, geométricas e repetitivas como as usadas aqui.

Combinar com outros efeitos CSS

Os padrões funcionam bem como fundo por trás de cartões com glassmorphism, já que o desfoque precisa de algo com textura visual atrás para ser visível. Também se combinam naturalmente com cantos arredondados no elemento contentor.

→ Gerador de Glassmorphism em CSS · Gerador de Border Radius

Perguntas frequentes

Estes padrões precisam de algum ficheiro de imagem?

Não. Todos os padrões aqui são gerados exclusivamente com gradientes CSS como background-image — não há PNG, SVG nem qualquer outro ficheiro envolvido, por isso não há pedido HTTP extra nem risco de ficar desfocado em ecrãs de alta resolução.

Posso alterar o tamanho do padrão?

Sim — o controlo de tamanho ajusta o background-size, que define quão grande é um bloco repetido do padrão. Um tamanho menor aproxima mais os pontos, riscas ou células da grelha; um tamanho maior afasta-os.

Porque é que o padrão de xadrez usa dois gradientes?

Um único linear-gradient() só consegue alternar cores numa direção. Sobrepor dois gradientes a 45 graus, desfasados entre si em meio bloco, é o que produz os quadrados claros/escuros alternados de um xadrez — esta é a técnica padrão para criar padrões de xadrez apenas em CSS.

Este padrão vai parecer nítido em ecrãs retina/alta densidade?

Sim. Como o padrão é um gradiente matemático e não uma imagem em bitmap, é renderizado na resolução que o ecrã precisar, sem ampliação nem desfoque — ao contrário de um pequeno bloco de imagem rasterizada esticado ou repetido em alta densidade de pixels.

Posso usar estes padrões como fundo de página inteira?

Sim — aplica o background-image, background-size e background-position gerados (quando presentes) ao body ou a qualquer elemento contentor de largura total. Tem atenção ao contraste: um padrão carregado e com muito contraste atrás de texto do corpo pode prejudicar a legibilidade, por isso definições mais leves/subtis normalmente funcionam melhor em grandes áreas de fundo.