Where should I place these?

Common spots: bottom of hero section transitioning to next section background, top of footer, between testimonial and CTA sections, divider between alternating-color sections. Set width:100% and the wave fills any container responsively. Match the wave fill color to the NEXT section's background so the transition reads correctly.

Inline SVG or background-image?

Inline SVG: smaller (no extra HTTP request), but the markup lives in every page. Background-image (.svg file): cacheable across pages, easier to swap colors via CSS variables, but requires the extra file. For a single-instance hero divider, inline. For a system-wide pattern, separate file. Both work; pick based on your build pipeline.

Will this look good on mobile?

If you set viewBox + preserveAspectRatio correctly, yes — the wave scales smoothly from 320px to 1920px+. Common mistake: setting fixed pixel dimensions, which makes the wave too tall on mobile and too short on desktop. Use percentage width and a reasonable viewBox aspect ratio (e.g., 1200x100).

How do I match the wave color to my design?

Match the wave's fill to the BACKGROUND COLOR of the section ABOVE or BELOW (depending on direction) so the wave appears to be that section bleeding into the other. Or use a CSS variable for the fill so the wave inherits the theme. Hard-coded colors break when you redesign; CSS variables survive.

Multiple layers — how do I pick?

Single layer: clean, minimal, fast — good for utility transitions. 2 layers: moderate depth with one wave 60-80% opacity behind another at 100%. 3 layers: dramatic, used for hero or pre-footer moments. More than 3 layers gets noisy. Vary amplitude slightly between layers (e.g., 60px, 50px, 40px) and offset phase so they don't align.

Possible with SVG animation (animate or animateTransform elements) or CSS animation on the path. But: animated decorative waves are heavy on performance (especially on mobile), can trigger motion-sickness for some users (ensure prefers-reduced-motion is respected), and are aesthetically dated — most modern sites use static waves. If you do animate, keep it slow (10-20 second cycle) and respect reduced-motion preferences.

Developer Utilities · Free tool

SVG Wave Generator

Generate smooth SVG wave shapes for hero dividers and decorative footers. Layered, color-tunable.

Updated June 2026

ColorHeight (150px)Amplitude (40)Frequency (2)Layers (2)Flip vertically (top-to-bottom wave)

<svg viewBox="0 0 1200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="150">
  <path d="M0,150 Q-150,126 0,110 Q150,24 300,40 Q450,126 600,110 Q750,24 900,40 Q1050,126 1200,110 L1200,150 L0,150 Z" fill="#0f766e" opacity="1"  transform-origin="center" style="transform: translateY(0px)" />
  <path d="M0,150 Q-150,126 0,110 Q150,24 300,40 Q450,126 600,110 Q750,24 900,40 Q1050,126 1200,110 L1200,150 L0,150 Z" fill="#0f766e" opacity="0.7"  transform-origin="center" style="transform: translateY(8px)" />
</svg>

Single-line SVG paths (no external assets) — works as inline SVG, in background-image: url() with data URIs, or saved as .svg. Scales perfectly to any width via preserveAspectRatio.

Found this useful?Email Buy Me a Coffee

What it does

SVG wave dividers became a defining design element of the post-2017 web — Stripe, Mailchimp, Spotify, and countless landing-page templates adopted them as the standard way to break up long-scroll pages, transition between sections with different background colors, and add a subtle organic feel to otherwise rectilinear layouts. The wave shape itself is mathematically a sine curve sampled along the page width and rendered as a closed SVG path with a fill — the parameters that matter are amplitude (how tall the wave peaks), frequency (how many oscillations across the width), phase offset (where the wave starts in its cycle), and number of layered waves (1-3 stacked at different opacities for depth).

The generator produces ready-to-paste SVG code: a viewBox that scales fluidly via preserveAspectRatio (so the wave stays the right shape regardless of container width), paths for 1-3 stacked layers (each at slightly different amplitude/frequency/opacity for the layered depth effect popular in modern designs), and your chosen fill colors. Output options: inline SVG (paste directly into JSX/HTML — easiest, smallest file), standalone .svg file (background-image: url() in CSS — cacheable, reusable across pages), or React component (for design-system libraries).

Common patterns and where to use them: bottom- of-hero divider (most common — wave transitions from hero background to body background, single layer, low amplitude for subtle effect, fill matches the section below), section-break divider (between alternating-color sections, medium amplitude, single layer), pre-footer flourish (3 stacked waves at decreasing opacity, high amplitude, dramatic visual moment before the CTA), full-width hero background (wave as decorative pattern overlaid behind text). For accessibility: waves are decorative, mark them aria-hidden=“true” so screen readers skip them.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/svg-wave-generator" width="100%" height="720" frameborder="0" loading="lazy" title="SVG Wave Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Pick fill color (matches the next section's background or accent color).
Set width and height (typically 100% × 100-200px for section dividers).
Tune amplitude (peak height, 20-80px typical) and frequency (1-3 oscillations across).
Optionally add 2-3 stacked layers at decreasing opacity for layered depth.
Copy the inline SVG or save as .svg file; paste between sections with `aria-hidden="true"`.

When to use this tool

Hero-to-body transition divider on a landing page.
Breaking up long-scroll pages with visual flourish at section boundaries.
Pre-footer dramatic transition into the call-to-action area.
Decorative background pattern in a hero section (low-opacity waves behind text).
Email signature or marketing graphic where you need lightweight decorative imagery.

When not to use it

When the design system already has its own divider/transition components — match the system, don't add waves.
Above critical text content — moving or busy waves can distract from copy.
Anywhere the wave reads as “trying too hard” in your aesthetic — minimalist designs (Apple, Linear, Vercel) typically avoid waves entirely.
Print or PDF output — waves are CSS/SVG-native and don't always survive PDF export cleanly.

Common use cases

Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion
Verifying a number or output before passing it on
Quick generation during a typical workday

Frequently asked questions

Where should I place these?: Common spots: bottom of hero section transitioning to next section background, top of footer, between testimonial and CTA sections, divider between alternating-color sections. Set width:100% and the wave fills any container responsively. Match the wave fill color to the NEXT section's background so the transition reads correctly.
Inline SVG or background-image?: Inline SVG: smaller (no extra HTTP request), but the markup lives in every page. Background-image (.svg file): cacheable across pages, easier to swap colors via CSS variables, but requires the extra file. For a single-instance hero divider, inline. For a system-wide pattern, separate file. Both work; pick based on your build pipeline.
Will this look good on mobile?: If you set viewBox + preserveAspectRatio correctly, yes — the wave scales smoothly from 320px to 1920px+. Common mistake: setting fixed pixel dimensions, which makes the wave too tall on mobile and too short on desktop. Use percentage width and a reasonable viewBox aspect ratio (e.g., 1200x100).
How do I match the wave color to my design?: Match the wave's fill to the BACKGROUND COLOR of the section ABOVE or BELOW (depending on direction) so the wave appears to be that section bleeding into the other. Or use a CSS variable for the fill so the wave inherits the theme. Hard-coded colors break when you redesign; CSS variables survive.
Multiple layers — how do I pick?: Single layer: clean, minimal, fast — good for utility transitions. 2 layers: moderate depth with one wave 60-80% opacity behind another at 100%. 3 layers: dramatic, used for hero or pre-footer moments. More than 3 layers gets noisy. Vary amplitude slightly between layers (e.g., 60px, 50px, 40px) and offset phase so they don't align.
Animated waves?: Possible with SVG animation (animate or animateTransform elements) or CSS animation on the path. But: animated decorative waves are heavy on performance (especially on mobile), can trigger motion-sickness for some users (ensure prefers-reduced-motion is respected), and are aesthetically dated — most modern sites use static waves. If you do animate, keep it slow (10-20 second cycle) and respect reduced-motion preferences.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →