Gerador de Padrão de Fundo CSS
Gere um padrão de fundo contínuo e repetido em CSS puro — pontos, grades, listras, tabuleiros, ondas e cubos 3D — com suas próprias cores, escala e opacidade. Copie a regra CSS pronta e o trecho HTML, sem necessidade de arquivo de imagem.
Entrada
Cores
Reduza para 10-20% para uma textura sutil atrás do texto.
Geometria
Tamanho de um bloco que se repete, em pixels.
Espessura das linhas ou raio dos pontos.
Saída
A regra gerada é limitada a esta classe, portanto não entrará em conflito com seus próprios estilos.
Saída
Seu padrão aparecerá aqui.
O CSS realmente gerado, renderizado em um Shadow DOM isolado — exatamente o que você copia.
O min-height inline está apenas para dar tamanho à caixa de demonstração vazia — remova-o em seu próprio layout.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-background-pattern-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"pattern": "dots",
"color": "#6366f1",
"bgColor": "#ffffff",
"opacity": "100",
"size": "32",
"weight": "3",
"className": "io-pattern"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-background-pattern-generator` tool (CSS Background Pattern Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-background-pattern-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Padrão de Fundo CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Um padrão de fundo repetido feito de gradientes CSS não pesa nada. Não há arquivo de imagem para hospedar, nenhuma solicitação HTTP extra, nenhuma borda borrada quando alguém abre sua página em uma tela retina, e as cores mudam editando dois valores hexadecimais em vez de exportar novamente um PNG. Este gerador constrói esse CSS para você: escolha um padrão, defina as cores, a escala e a opacidade, e copie a regra concluída.
Tudo é executado em seu navegador — nada do que você digita é carregado em qualquer lugar.
Como usar
- Escolha um padrão. Quinze famílias estão disponíveis: bolinhas, bolinhas deslocadas, grade, papel milimetrado, listras horizontais / verticais / diagonais, cruzado, linhas isométricas, tabuleiro de xadrez, diamantes, triângulos, zigue-zague, ondas e cubos 3D.
- Defina as cores. "Cor do padrão" pinta as formas, "Cor de fundo" as preenche atrás delas.
- Ajuste a geometria. Tamanho do padrão é a largura de um bloco que se repete em pixels; Espessura da linha é o quão espessas são as linhas (ou o quão grandes são os pontos). A espessura da linha fica oculta para padrões cuja geometria é puramente proporcional — um tabuleiro de xadrez não tem linha para engrossar.
- Reduza a opacidade. Esta é a configuração que a maioria das pessoas quer e que a maioria dos geradores não possui. Em 100% um padrão compete com seu conteúdo; em 10–20% é lido como textura.
- Copie o CSS e cole-o em sua folha de estilos. O trecho HTML ao lado dele mostra a marcação que a regra espera.
Configurações
- Padrão — a família de geometria. Cada um é um
background-imagepuro construído a partir delinear-gradient,repeating-linear-gradientouradial-gradient. - Cor do padrão / Cor de fundo — valores hexadecimais.
background-colorfica sob as camadas de gradiente, então a cor do padrão é o que você vê no topo. - Opacidade do padrão — abaixo de 100% a cor do padrão é emitida como
rgba()para que o fundo apareça através dele. - Tamanho do padrão — 4px até 160px. Valores pequenos dão textura fina, valores grandes dão blocos gráficos ousados.
- Espessura da linha — limitada à metade do tamanho do bloco, porque uma linha mais espessa do que isso preencheria o bloco com um bloco sólido.
- Nome da classe — a regra é limitada a esta classe, para que não possa colidir com nada em sua folha de estilos.
Por que o CSS tem várias camadas de background-image?
A maioria desses padrões não pode ser desenhada com um gradiente. Uma grade é uma família de linhas verticais mais uma horizontal; um tabuleiro de xadrez é dois gradientes diagonais deslocados; os cubos isométricos precisam de seis camadas para dar a cada face uma tonalidade diferente. O CSS as pinta na ordem escrita, primeira camada no topo, e background-size / background-position se alinham com essas camadas uma a uma. Parece verboso, mas é uma propriedade — você pode colar com segurança todo o bloco como está.
Por que background-size está ausente nos padrões de listras?
As famílias de listras, cruzadas e isométricas usam repeating-linear-gradient, que carrega seu próprio período de repetição nas paradas de gradiente. Adicionar um background-size lá não mudaria nada, portanto a ferramenta não a emite.
Esses padrões funcionarão em navegadores mais antigos?
Cada padrão usa gradientes CSS, suportados em todos os lugares desde aproximadamente 2012. As famílias de listras usam paradas de cores de múltiplas posições (color 0 6px), que precisam de um navegador de 2019 ou mais recente — todas as versões atuais do Chrome, Firefox, Safari e Edge lidam com isso.
E se eu quiser um padrão atrás de texto?
Defina a opacidade para 10–20% e escolha um tamanho de padrão pequeno. Um padrão ocupado em força total torna a cópia do corpo difícil de ler; o mesmo padrão em 15% é lido como textura de papel e sai do caminho.
Ferramentas relacionadas
Precisa de um gradiente em vez de um padrão? O Gerador de Gradiente CSS constrói gradientes lineares e radiais visualmente. Para uma forma repetida emitida como arquivo SVG real em vez de CSS, use o Gerador de Padrão SVG, e para um fundo desfocado suave, o Gerador de Blob Aurora CSS.