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 Gratis Sin registro

SVG Wave Generator

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

Cargando la herramienta…

Acerca de esta herramienta

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.

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.

Visualizador de Trayectos SVG

Pegue un atributo `d` de trayecto SVG, renderícelo en vivo con una cuadrícula y explore cada comando de trayecto analizado.

Conversor de SVG a fondo CSS

Convierta marcado SVG en un URI de datos CSS background-image — codificado en URL o en base64.

Selector de gradiente de color de múltiples paradas

Cree hermosos gradientes CSS de múltiples paradas visualmente con paradas de arrastrar y soltar.