SVG Wave Tool

SVG Wave Generator

Create an SVG wave for a hero, section transition or footer. Customise the curve live, then copy the exact SVG markup or download a standalone file.

Wave settings

Presets

CurveAmplitude56pxFrequency2 wavesHorizontal phase0°Vertical position52%Layers2Opacity90%

Direction

Bottom dividerTop dividerFlip horizontally

Canvas and coloursViewBox width1200ViewBox height360Foreground colour#2563ebLayer colour#14b8a6Background colour#eff6ff

Wave ready. Adjust a control to update it live.

Your SVG is generated in your browser and is not uploaded.

Live preview

See the foreground wave against the selected background.

1200 × 360 viewBox

Generated SVG markup

<svg viewBox="0 0 1200 360" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
  <rect width="1200" height="360" fill="#eff6ff" />
  <path d="M0 360 L0 216.46 C50 216.46 100 250.25 150 250.25 C200 250.25 250 189.3 300 189.3 C350 189.3 400 155.51 450 155.51 C500 155.51 550 216.46 600 216.46 C650 216.46 700 250.25 750 250.25 C800 250.25 850 189.3 900 189.3 C950 189.3 1000 155.51 1050 155.51 C1100 155.51 1150 216.46 1200 216.46 L1200 360 Z" fill="#14b8a6" opacity="0.702" />
  <path d="M0 360 L0 187.2 C50 187.2 100 243.2 150 243.2 C200 243.2 250 187.2 300 187.2 C350 187.2 400 131.2 450 131.2 C500 131.2 550 187.2 600 187.2 C650 187.2 700 243.2 750 243.2 C800 243.2 850 187.2 900 187.2 C950 187.2 1000 131.2 1050 131.2 C1100 131.2 1150 187.2 1200 187.2 L1200 360 Z" fill="#2563eb" opacity="0.9" />
</svg>

Use the wave as a divider

The downloaded SVG is standalone. Size it with CSS and add aria-hidden="true" when it is purely decorative.

Hero dividerPlace it at the lower edge of a hero section.
Section transitionBridge two contrasting background colours.
Footer waveSwitch to a top divider above footer content.
Decorative backgroundUse reduced opacity and layers behind simple content.

Explore CSS backgrounds Build a colour palette Browse SVG icons

How to Use SVG Wave Generator

Choose a useful wave preset or start with the default divider.
Adjust amplitude, frequency, phase, position, layers, direction and colours.
Review the wave against the example section in the live preview.
Copy the exact SVG markup or download the standalone .svg file.

FAQ

Can I use the generated SVG wave commercially?

Yes. Generated SVG waves are free to use in personal and commercial projects.

Is the SVG wave responsive?

Yes. The output uses a viewBox without fixed rendered dimensions, so it scales with the CSS size of the SVG element.

Can I edit the SVG after downloading it?

Yes. The generated output is plain SVG markup that can be edited in code or design tools.

How should I make a decorative wave accessible?

The downloaded SVG includes aria-hidden and focusable attributes for decorative use. Remove aria-hidden and add an accessible name only if the graphic conveys meaning.

Useful published resources for the next step.

Next stepIcon Catalogue

Find and customise SVG icons for the same interface.

Related taskCSS Gradient Generator

Build multi-stop linear, radial, conic and repeating CSS gradients with live previews.

Related taskColor Palette Generator

Generate palettes, shades, tints, gradients and mixed colors.

Related taskContrast Checker

Check foreground and background colour contrast.