Design Tool

SVG Wave GeneratorCreate beautiful waves

Generate unique, multi-layered SVG waves for your next web project. Customize shape, color, and complexity, then export as SVG or JSX.

Layers

Layer 1

Layer 2

Wave Settings

Color

Opacity1

Wave Shape

Height150

Complexity3

Contrast (Amplitude)50

Offset (Phase)0

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 500">
  <path fill="#3b82f6" fill-opacity="1" d="M 0 500 L 0 390.28402843132426 C 180 390.28402843132426 180 331.74518083210387 360 331.74518083210387 C 540 331.74518083210387 540 336.9033040461545 720 336.9033040461545 C 900 336.9033040461545 900 327.5005142795635 1080 327.5005142795635 C 1260 327.5005142795635 1260 378.5779450287009 1440 378.5779450287009 L 1440 500 Z"></path>
  <path fill="#60a5fa" fill-opacity="0.5" d="M 0 500 L 0 295.5607275062357 C 144 295.5607275062357 144 340.34690730724833 288 340.34690730724833 C 432 340.34690730724833 432 337.3205972312644 576 337.3205972312644 C 720 337.3205972312644 720 313.41353448339305 864 313.41353448339305 C 1008 313.41353448339305 1008 333.4878486016805 1152 333.4878486016805 C 1296 333.4878486016805 1296 308.55743217969575 1440 308.55743217969575 L 1440 500 Z"></path>
</svg>