Gerador de Divider SVG

Dividers SVG: a alternativa moderna ao <hr>

Um divider (ou separador de seção) é a transição visual entre dois blocos de uma landing page — tipicamente uma onda, curva, diagonal ou zigue-zague que liga o hero colorido ao próximo bloco branco. Antes do SVG, a única forma sã de fazer isso era recortar um PNG no Photoshop e servir como background-image; hoje um path SVG entrega uma forma nítida e infinitamente escalável em menos de 2 KB. Este gerador devolve o markup para você colar logo acima ou abaixo de qualquer seção.

A receita é sempre a mesma: um <svg> com viewBox="0 0 1440 100" (ou 1920×100 para telas ultra-largas), preserveAspectRatio="none" para esticar de ponta a ponta, mais um <path> preenchido com a cor da seção seguinte. Coloque o SVG com width:100vw; display:block; e a curva casa os dois fundos sem costura.

Estilos de divider e quando usar cada um

• Onda (wave) — curva Bezier suave; transmite simpatia, usada em landing pages SaaS (Stripe, Linear).
• Curva / arco — semicírculo simples; limpo, neutro, funciona sob hero sections.
• Triângulo — polígono pontiagudo; afiado, técnico, encaixa em páginas de devtools.
• Diagonal (slant) — um único corte reto em ângulo; minimalista, moderno, fácil de empilhar.
• Zigue-zague — múltiplos segmentos lineares; brincalhão, retrô, comum em páginas infantis.
• Linha pontilhada / tracejada — separador inline dentro de conteúdo, não entre seções.
• Vinheta ornamental — floreios tipográficos (❦ ❧ ✦) para layouts editoriais.
• Gradient fade — transição suave sem forma definida; feita com <linearGradient> dentro do SVG.

Layered dividers — profundidade visual

Empilhe dois ou três paths com pequenos offsets e opacidades decrescentes (ex.: 100%, 60%, 30%) para obter o efeito de profundidade de campo popular em landing pages a partir de 2020. Cada camada pode ter uma curva ligeiramente diferente para não se sobrepor perfeitamente — uma onda "frente" mais agressiva em 100% sobre uma onda "fundo" mais leve em 40%.

Inverter e espelhar

Para reutilizar o mesmo path no topo e no rodapé de uma seção, aplique transform="rotate(180)" no SVG inteiro, ou inverta verticalmente com transform="scale(1, -1)" no <path>. Espelhar horizontalmente com scale(-1, 1) quebra a assimetria que faz uma onda parecer menos artificial quando usada duas vezes.

SVG vs CSS clip-path vs gradientes

Paths SVG dão conta de curvas orgânicas e formas irregulares — única opção para ondas. CSS clip-path: polygon(...) é ótimo para triângulos e diagonais sem precisar de marcação, mas não consegue curvas suaves. Backgrounds com linear-gradient simulam listras, fades e padrões geométricos básicos, mas não recortam as bordas da seção. Use SVG para tudo que é curvo, CSS para polígonos triviais e gradiente para transições suaves.

Eras do design

Entre 2018 e 2021 a moda do "blob design" empurrou curvas suaves e exageradas para todo lado (Mailchimp, Slack, Notion no início). Desde 2022 uma contra-tendência brutalista trocou tudo por dividers grossos, com arestas duras e sem anti-aliasing — triângulos afiados, degraus em blocos, diagonais abruptas. Combine o estilo com a voz da marca: produto amigável → onda; ferramenta/devtool → triângulo ou diagonal; editorial → vinheta ornamental.

Ferramentas especializadas que você verá por aí

O shapedivider.app popularizou o construtor visual; o getwaves.io foca em ondas com slider de "complexidade"; Wickedly Simple Section Dividers, GenerateUI e Haikei oferecem catálogos maiores incluindo blobs, mesh gradients e noise. Este gerador cobre as quatro formas que você realmente vai precisar em 95% dos casos.

Perguntas frequentes

Quanto pesam esses SVGs? Menos de 2 KB descomprimidos — uma onda tem cerca de cem caracteres de path data. Com gzip cai abaixo de 500 bytes. Custo praticamente zero comparado a um raster da mesma largura.

São responsivos? Sim. Com viewBox + preserveAspectRatio="none" o path estica para qualquer largura. Em telas muito altas de mobile pode valer escalar a altura com height: clamp(40px, 8vw, 100px) para manter a curva proporcional.

Posso combinar um divider com gradiente? Sim — defina um <linearGradient> dentro de <defs> e use fill="url(#meuGradiente)" no path. Anime o gradiente com CSS ou SMIL para um banner em movimento sutil.

Dividers são problema de acessibilidade? São puramente decorativos; adicione aria-hidden="true" e role="presentation" para o leitor de tela ignorá-los.