Tools Blog

SVG Wave Generator

Generate smooth SVG wave dividers for section transitions on your website.

SVG outputCustomizableNo upload

① Customize height, amplitude and color ② Preview the wave live ③ Copy SVG or HTML snippet

Height (px) 120
Amplitude (px) 40
Waves 2
Wave Color
#C9B89A
Background
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none"> <path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/> </svg>

What are SVG wave dividers and how to use them?

SVG wave dividers are scalable vector graphics used to create smooth transitions between sections of a webpage. Unlike PNG or JPG dividers, SVG waves are resolution-independent and scale perfectly on all screen sizes and pixel densities. They are typically placed at the bottom of a section, with the fill color matching the next section's background. The preserveAspectRatio="none" attribute ensures the wave always stretches full width. The wave shape is defined by a <path> element inside an <svg> using quadratic Bézier curves (Q command) or straight lines. Wave dividers are a popular technique in modern landing page design, creating visual depth and movement without requiring any images.

Frequently Asked Questions

An SVG wave divider is a scalable vector graphic used as a visual separator between page sections. It's a filled shape with a curved top edge. Because it's SVG, it scales perfectly at any resolution without pixelation.
Copy the HTML snippet and paste it at the bottom of a section. The wave fills the color of the next section, creating a smooth color transition. Set width="100%" and use preserveAspectRatio="none" to stretch it to any screen width.
Amplitude controls the height of the wave peaks and valleys. A higher amplitude creates more dramatic, visible waves. Lower amplitude produces subtle, gentle undulation. Typical values range from 20px (subtle) to 80px (dramatic).
Frequency controls how many complete waves appear across the full width. 1 = one gentle S-curve, 2–3 = typical wave pattern, 4+ = many small ripples. Higher frequency waves work well for decorative bands; lower frequency for bold section dividers.
Smooth waves (using quadratic bezier curves) are the most common choice for modern designs — they resemble natural water waves. Angular waves (using straight lines) create a geometric, crystalline effect suitable for tech or data-oriented brands.
The flip toggle mirrors the wave vertically. A normal wave has the filled area at the bottom (useful at the bottom of a dark section transitioning to a light one). A flipped wave has the filled area at the top (useful at the top of the next section).
Yes. Apply a CSS animation to the <svg> element or the <path> using translateX() on a wider viewBox. Example: @keyframes wave { from { transform: translateX(0) } to { transform: translateX(-50%) } } with a viewBox twice as wide (2880) and the path repeated.
Related Articles
CSS 14 min read
CSS Gradients: The Complete Guide from Linear to Conic
Master all three CSS gradient types — linear, radial, and conic — with advanced color stops, angles, hints, and real patterns like striped backgrounds, gradient text, and mesh gradients.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →