What wave styles are available?

Five styles are built in: Smooth (cubic bezier curves), Sharp (straight V-shapes), Jagged (random-height spikes), Layered (two offset smooth waves), and Double Wave (S-curve using two peaks per period).

How do I use the SVG as a CSS background?

Click 'Copy CSS' to get a background-image property using a data-URI. Paste it directly into your stylesheet — no external file required.

Flip Horizontal mirrors the wave so peaks become troughs and vice versa. Flip Vertical rotates the shape 180° so the wave points upward instead of downward — useful for bottom section dividers.

Can I use a gradient fill?

Yes — enable the gradient toggle and choose a start and end color. The gradient is embedded directly in the SVG as a linearGradient definition.

Design Gratuito Sem cadastro

SVG Wave Generator

Create decorative SVG wave dividers for websites with live preview and one-click download.

Carregando ferramenta…

Sobre esta ferramenta

Generate smooth, sharp, jagged, layered, or double-wave SVG shapes for section dividers on websites. Fine-tune amplitude (wave height), frequency (number of crests), fill color, optional gradient, horizontal and vertical flipping, viewport height, and the number of overlapping layers (1–3). Choose from 10 built-in presets or tweak every parameter manually. The live preview updates in real time. Copy the raw SVG markup, grab the equivalent CSS background-image data-URI, or download the shape as a standalone .svg file ready to drop into any project.

Como usar

1 Select a wave style or click one of the 10 presets to start.
2 Adjust amplitude, frequency, and height sliders to shape the wave.
3 Pick a fill color and optionally enable a gradient with a second color.
4 Use the Flip buttons to orient the wave for top or bottom placement.
5 Add 1–3 layers with different opacities for a more organic look.
6 Click 'Copy SVG', 'Copy CSS', or 'Download SVG' to export your wave.

Perguntas frequentes

Ferramentas relacionadas

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.

Visualizador de Caminho SVG

Cole um atributo `d` de caminho SVG, renderize-o ao vivo com uma grade e explore cada comando de caminho analisado.

Conversor de SVG para Fundo CSS

Converta marcação SVG em uma URI de dados CSS background-image — codificada por URL ou base64.

Seletor de Gradiente de Múltiplas Paradas

Crie belos gradientes CSS de múltiplas paradas visualmente com paradas de arrastar e soltar.