Gerador de Padrões CSS
Gere padrões CSS para fundos instantaneamente. Escolha pontos, linhas, grade, xadrez ou diagonal — copie o CSS e use em qualquer lugar.
① Escolha um tipo de padrão ② Ajuste tamanho e cores ③ Copie o CSS gerado
Cor do padrão
#C9B89A
Cor de fundo
#0E0E0E
Como funciona
Cada padrão é construído com gradientes CSS puros — sem imagens, sem SVG. Pontos usam radial-gradient, linhas e diagonal usam repeating-linear-gradient, a grade usa dois linear-gradients cruzados, e o xadrez usa conic-gradient.
Controlo de tamanho
O controlo deslizante Tamanho define o tile background-size. Tiles maiores criam um padrão mais esparso; tiles menores criam uma textura mais densa.
Apenas CSS
O CSS gerado usa apenas background-image e background-size, tornando-o compatível com qualquer elemento HTML e todos os browsers modernos.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
O que é um padrão CSS de fundo?
Os padrões CSS de fundo são texturas visuais repetitivas criadas inteiramente com gradientes CSS — sem imagens necessárias. Usando radial-gradient, linear-gradient e conic-gradient, pode produzir pontos, linhas, grades, xadrez e listras diagonais que se repetem sem interrupções. Esta técnica é suportada em todos os browsers modernos e não gera pedidos HTTP adicionais.
Perguntas frequentes
Um padrão CSS de fundo é uma textura visual repetitiva gerada inteiramente com funções de gradiente CSS — sem imagens ou SVG necessários. Combinando radial-gradient, linear-gradient, repeating-linear-gradient e conic-gradient com background-size, cria pontos, linhas, grades, xadrezes e listras diagonais sem interrupções.
O padrão de pontos usa radial-gradient para desenhar um pequeno círculo preenchido no centro de cada tile, com preenchimento transparente para o resto. Ao definir background-size para as dimensões do tile, os pontos repetem-se numa grade regular.
O padrão de linhas usa um único repeating-linear-gradient numa direção, criando linhas horizontais paralelas. O padrão de grade usa dois linear-gradients perpendiculares sobrepostos, criando uma grade cruzada com linhas em ambas as direções.
A função conic-gradient cria uma rotação de quatro quartos onde os quartos alternados são preenchidos com a cor do padrão ou do fundo. Ao definir background-size para o dobro do tamanho do tile, os quatro quartos formam um xadrez perfeito.
Os cinco padrões usam funções de gradiente suportadas em todos os browsers modernos. O conic-gradient usado para xadrez requer Chrome 69+, Firefox 83+ e Safari 12.1+.
Copie o CSS gerado e aplique-o a qualquer elemento HTML. Pode adicioná-lo inline via atributo style ou numa classe CSS. Para um fundo de página completa, aplique-o ao body ou a um div fixo.
A ferramenta suporta 5 tipos de padrão: pontos, linhas, grade, xadrez e diagonal. Cada um é configurável com um tamanho de tile arbitrário (4–40px) e cores completamente personalizadas.