Como usar: Gerador de Ondas SVG
- Clique em Embaralhar ondas para gerar uma nova onda aleatória, depois em + Adicionar onda ou remova uma com ×, e ajuste as cristas e a altura.
- Escolha Suave, Picos ou Degraus, e se a onda fica na base ou no topo de uma seção.
- Defina a cor e a opacidade de cada onda (ou uma cor única para todas), redesenhe uma onda isolada com ↻ e escolha o fundo atrás dela.
- Copie o SVG, a versão de background CSS ou baixe o arquivo.
Adicionando um divisor de onda a uma seção
O SVG usa um viewBox largo (1440 × 320) com preserveAspectRatio="none", então ele se estica até a largura total de qualquer seção. Posicione-o na borda da seção cuja cor ele combina:
<section class="hero">
…
<svg class="wave" viewBox="0 0 1440 320" preserveAspectRatio="none">…</svg>
</section>
.hero { position: relative; }
.wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }Ou use a saída de background CSS — o SVG é codificado em um url("data:image/svg+xml,…"), então você não precisa de arquivo extra. Cada camada é um único <path>; ondas em camadas recebem tons progressivamente mais claros da sua cor para dar profundidade.
Veja também: Gerador de Blob SVG, Gerador de Gradiente CSS, Otimizador de SVG.
Também pesquisado como: gerador de onda, onda css, gerador de divisor de seção, background svg ondulado, onda svg, divisor de forma svg, gerador de ondas em camadas.
Ferramentas que combinam com: Gerador de Ondas SVG
- Gerador de Máscara CSS — Faça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda, topo e base, as quatro bordas, uma vinheta radial ou um spotlight, corte o elemento em listras — ou aplique uma máscara com um formato (estrela, coração, hexágono, seta…) com bordas suaves e esfumadas, o que o clip-path não consegue.
- Gerador de Clip-path CSS — Recorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono, estrela, seta, chevron, balão de fala, círculo, elipse, retângulo arredondado… — e depois arraste os pontos sobre um exemplo ou sobre a sua própria imagem.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Como adiciono um divisor de onda entre seções?
Gere uma onda, copie o SVG e posicione-o na base (ou no topo) da seção, com posicionamento absoluto e width: 100%. Defina a cor da onda como a cor de fundo da próxima seção.
Por que a onda se estica para qualquer largura?
O SVG usa preserveAspectRatio="none", então ele escala horizontalmente para preencher o contêiner, enquanto você controla a altura no CSS.
Posso usar no Webflow ou no WordPress?
Sim — cole o SVG em um bloco Embed / HTML, ou use a versão de background CSS na sua folha de estilos.
As ondas são gratuitas?
Sim. Elas são geradas no seu dispositivo; use em qualquer lugar sem necessidade de atribuição.
Posso instalar o Gerador de Ondas SVG como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Ondas SVG é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.