BluebirdBluebird
Home/SVG Wave Generator

SVG Wave Generator

Generate smooth SVG waves for landing pages — control height, amplitude and gradient, then copy SVG or download.

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Pick input
  2. Tweak
  3. Copy / export
How this works
  1. 1
    Tune the wave

    Drag sliders for amplitude, frequency and complexity. The wave redraws instantly.

  2. 2
    Style it

    Pick colour, gradient and layers. Layered waves make nice hero backgrounds.

  3. 3
    Copy SVG or download

    Grab the SVG markup or save the file, ready for your site or slide.

Watch: sliders reshape the wave live
copy
Shape
Preview
SVG code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 180" preserveAspectRatio="none" width="100%" height="180">
  <defs>
    <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#60a5fa" />
      <stop offset="100%" stop-color="#a78bfa" />
    </linearGradient>
  </defs>
  <path d="M 0 140 Q 240 180, 480 140 Q 720 100, 960 140 Q 1200 180, 1440 140 L 1440 180 L 0 180 Z" fill="url(#g)" />
</svg>
How this works
  • Pick a height, amplitude and number of peaks for your wave.
  • Choose two colors for the gradient and which edge stays flat.
  • Copy the SVG, or download the file and drop it into your hero section.

Rate SVG Wave Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate