Como usar: Gerador de Padrões SVG
- Escolha um padrão: bolinhas, grade, linhas, zigue-zague, ondas, sinal de mais, xadrez, círculos, triângulos, hachura cruzada, losangos ou listras.
- Defina o tamanho do tile, a espessura da linha e a opacidade; opacidade baixa cria texturas sutis.
- Escolha as cores do padrão e do fundo, ou um fundo transparente para sobrepor a sua própria cor ou gradiente.
- Copie o CSS (o SVG vai embutido como data URI) ou baixe o tile como arquivo SVG.
Por que padrões SVG?
Um tile de padrão é um SVG minúsculo, geralmente com menos de 300 bytes, que o navegador repete com background-repeat. Ele continua nítido em qualquer nível de zoom e em telas retina, não exige nenhuma requisição extra quando embutido como data URI e muda de cor instantaneamente ao alterar dois valores.
.hero {
background-color: #0f172a;
background-image: url("data:image/svg+xml,…");
background-size: 24px 24px;
}Os padrões são construídos para que as bordas se alinhem perfeitamente ao se repetirem. Para sobrepor um padrão a um gradiente, marque Fundo transparente e liste as duas imagens: background-image: url(…padrão…), linear-gradient(…). Para divisores em heróis, veja o Gerador de Ondas SVG e o Gerador de Divisores de Seção.
Também pesquisado como: padrão de fundo css, gerador de padrão sem emenda, gerador de fundo svg, padrão de bolinhas css, padrão de grade css, hero patterns, padrão de fundo sutil.
Ferramentas que combinam com: Gerador de Padrões SVG
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Gerador de Blob SVG — Crie formas blob orgânicas e suaves para fundos de seções de destaque, avatares e ilustrações.
- SVG para CSS — Cole um SVG e receba uma data URI compacta, codificada em URL, além de regras background-image e mask-image prontas para uso, com cor ajustável.
- Gerador de Glassmorphism — Monte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores — com o prefixo -webkit-backdrop-filter e um fallback para navegadores mais antigos.