SVG Wave Generator

Create beautiful SVG wave dividers for your website sections. Customize and download instantly.

⚙️ Settings

WAVE TYPE

COLOR 1

COLOR 2

BACKGROUND

HEIGHT120px

SMOOTHNESS (POINTS)6

LAYERS2

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 138" preserveAspectRatio="none" style="display:block;">
<defs><linearGradient id="waveGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#8b5cf6"/></linearGradient></defs>
  <path d="M0,120 L0,0 Q144,31.74040362379355 288,51.35705187993829 Q432,51.3570518799383 576,31.740403623793554 Q720,6.613092715395708e-15 864,-31.740403623793544 Q1008,-51.35705187993829 1152,-51.3570518799383 Q1296,-31.74040362379356 1440,-1.3226185430791417e-14 L1440,120 Z" fill="url(#waveGrad)" opacity="1.00" transform="translate(0,0.0)"/>
  <path d="M0,96 L0,0 Q120,21.599999999999998 240,37.41229744348775 Q360,43.2 480,37.41229744348775 Q600,21.599999999999998 720,5.290474172316566e-15 Q840,-21.60000000000001 960,-37.412297443487745 Q1080,-43.2 1200,-37.41229744348775 Q1320,-21.60000000000002 1440,-1.0580948344633132e-14 L1440,96 Z" fill="url(#waveGrad)" opacity="0.70" transform="translate(0,18.0)"/>
</svg>