FreeDev Tools

SVG Wave Generator

Wavy section dividers as inline SVG — tune waves and amplitude, copy SVG or CSS.

/* As a CSS background (divider strip) */
.wave-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C173,20 307,20 480,60 C653,100 787,100 960,60 C1133,20 1267,20 1440,60 L1440,120 L0,120 Z' fill='%233b82f6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  height: 120px;
}

/* Or paste the raw SVG into your HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,60 C173,20 307,20 480,60 C653,100 787,100 960,60 C1133,20 1267,20 1440,60 L1440,120 L0,120 Z" fill="#3b82f6"/></svg>
*/

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Shape the wave

    Count, amplitude, color, and optional vertical flip.

  2. 2

    Check the preview

    The divider strip renders live at full width.

  3. 3

    Copy SVG or CSS

    Raw markup and the data-URI background are both in the output.

Frequently Asked Questions

Generate the wave, then either paste the raw SVG between your sections or use the CSS version — a data-URI background on a divider strip — both included in the output.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually