Gerador de ondas SVG
Ajuste a onda até gostar, gere outras variações com um toque e copie o SVG. Ele estica na largura da tela e fica leve, sem imagem.
Ondas para separar seções
Disponível em: 
Gerador de ondas SVG: para que serve
Ajuste a altura, o número de ondas, a variação e quantas camadas transparentes a onda tem, escolha a cor e o estilo (suave, com pontas ou em degraus) e gere variações com um toque. A opção inverter vira a onda para cima.
O SVG sai com viewBox de 1440 px de largura e preserveAspectRatio=none, para esticar na largura da tela. Baixe o arquivo ou copie o código.
Como usar
- Ajuste altura, ondas, variação e camadas.
- Escolha cor e estilo e gere outras ondas até gostar.
- Baixe ou copie o SVG e cole entre as seções.
Quando usar
- Separar seções de landing pages.
- Topos e rodapés com visual moderno.
- Fundos de banners e cabeçalhos.
Perguntas frequentes
Como uso a onda no site?
Cole o SVG entre duas seções, logo depois do fim de uma e antes da outra. Use a cor da seção de baixo na onda e a da seção de cima no fundo, ou o contrário com a opção inverter.
A onda fica boa no celular?
Sim. O SVG usa preserveAspectRatio=none e largura de 100%, então estica na largura da tela mantendo a altura que você escolher no CSS.
Posso usar em projetos comerciais?
Sim. A onda é gerada aqui, no seu navegador, e é sua.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.