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 325.6626660682741 C 180 325.6626660682741 180 382.7234983995595 360 382.7234983995595 C 540 382.7234983995595 540 318.4627371620991 720 318.4627371620991 C 900 318.4627371620991 900 356.33951468898886 1080 356.33951468898886 C 1260 356.33951468898886 1260 352.5645544130384 1440 352.5645544130384 L 1440 500 Z"></path>
  <path fill="#60a5fa" fill-opacity="0.5" d="M 0 500 L 0 314.0866520836971 C 144 314.0866520836971 144 318.9499229403009 288 318.9499229403009 C 432 318.9499229403009 432 323.6302266365965 576 323.6302266365965 C 720 323.6302266365965 720 311.1880371365078 864 311.1880371365078 C 1008 311.1880371365078 1008 349.40860583177255 1152 349.40860583177255 C 1296 349.40860583177255 1296 319.9594287263062 1440 319.9594287263062 L 1440 500 Z"></path>
</svg>