SVG Waves in Web Design: Create Custom Backgrounds

Why SVG Waves?

Flat section dividers — hard horizontal lines between content blocks — are visually dull. SVG wave dividers add organic, flowing transitions between sections that make a page feel more dynamic and polished. They are used by SaaS landing pages, portfolio sites, and marketing pages everywhere.

SVG (Scalable Vector Graphics) is the ideal format for these shapes. Unlike raster images (PNG, JPG), SVG waves scale to any screen width without pixelation. A single SVG wave element works on a 320px mobile screen and a 4K desktop monitor equally well. The file size is typically under 2KB — far smaller than an equivalent image.

Anatomy of an SVG Wave

An SVG wave is a <path> element with a series of cubic Bezier curves. The d attribute contains the drawing instructions:

<svg viewBox="0 0 1440 320">
<path d="M0,160 C360,320 720,0 1080,160 C1260,240 1380,100 1440,160 L1440,320 L0,320 Z" fill="#3b82f6"/>
</svg>

Breaking this down: M0,160 starts at the left edge, 160px down. The C commands define curves with control points that shape the wave. L1440,320 L0,320 Z draws straight lines to the bottom corners and closes the path, filling the area under the wave.

The viewBox="0 0 1440 320" sets the coordinate system. The SVG stretches to fill its container while maintaining these proportions. Wider viewBoxes produce gentler, more stretched waves.

Implementation Methods

CSS Background

The most common approach is positioning the SVG absolutely at the bottom (or top) of a section:

.section { position: relative; padding-bottom: 80px; }
.section .wave { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; }

The padding-bottom on the section ensures content does not overlap the wave.

Inline SVG

Placing the SVG directly in your HTML gives you full CSS control over fill color, opacity, and animation. You can change the wave color with CSS custom properties to match different sections:

.wave-blue path { fill: var(--color-primary); }
.wave-dark path { fill: var(--color-dark); }

CSS clip-path

For simpler wave shapes, you can use clip-path on the section itself instead of a separate SVG element. This clips the section's edges into a wave shape. Less flexible than SVG but requires zero extra markup.

Design Tips

• Match colors to adjacent sections: The wave fill should match the next section's background color. This creates a seamless transition rather than a wave floating over a gap.
• Keep waves subtle: Tall, dramatic waves draw attention to the divider instead of the content. A wave height of 40-80px (on a 1440px wide section) is usually sufficient.
• Use asymmetric waves: Perfectly symmetrical sine waves look artificial. Offset the peaks and vary the curve depth for a more organic feel.
• Layer multiple waves: Stacking 2-3 waves with different opacities creates depth. The back wave might be 10% opacity, the middle 20%, and the front solid.
• Flip for variety: Use transform: rotate(180deg) to flip a wave for the top of a section, so the same shape transitions in and out.

Animating SVG Waves

Animated waves add life to hero sections and landing pages. Two common approaches:

CSS animation: Translate the wave horizontally using @keyframes. Create an SVG twice as wide as the viewport and slide it left continuously. When it reaches the end, it loops seamlessly if the left and right edges match.

JavaScript: For more complex animations, libraries like GSAP can morph the wave's path data over time, creating a fluid, ever-changing wave. This is more performant than animating the SVG path directly via CSS because GSAP batches DOM updates.

Keep animation subtle — a slow, gentle undulation is elegant. Fast, bouncy waves are distracting and increase motion sickness risk for sensitive users. Always respect prefers-reduced-motion by disabling animations for users who have enabled that setting.

Generate Your SVG Wave

Our SVG Wave Generator lets you design custom wave dividers visually. Adjust the number of layers, wave height, colors, and complexity, then export clean SVG code ready to paste into your project. Everything runs in your browser.