Back to all tools

SVG Wave Generator

Create SVG wave patterns for headers and footers

Live Preview

Wave Type

Customization

SVG Code

<svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M0,75L80,55Q120,35,160,55T320,55T480,55T640,55T800,55T960,55T1120,55T1280,55T1440,75V150H0Z" fill="#3B82F6"/>
</svg>

Usage

  • • Perfect for section dividers
  • • Use as header or footer backgrounds
  • • Responsive by default (preserveAspectRatio="none")
  • • Flip to use as bottom wave
  • • Customize color to match your design

Enjoying this tool?

Support us to keep building free tools!

Secure payment via Stripe • No account required