CSS & Web Design5 min read•Updated 2026-09-07
How to Create Modern SVG Waves & Section Dividers in Web Design
Ditch rigid horizontal boundaries with organic cubic Bézier curve dividers that scale seamlessly across mobile and 4K displays.
MX
MultiToolX Technical Team
UI/UX Engineering
Key Takeaways
- SVG wave dividers weigh under 1 KB and scale infinitely without raster pixelation or blurriness.
- Setting preserveAspectRatio='none' allows SVG waves to stretch dynamically across 100% viewport width.
- Layering 2 or 3 waves with staggered opacity creates a sense of ocean depth and fluidity.
Live Interactive Tool
SVG Wave & Section Divider Generator
Use this tool directly below without leaving the guide. 100% free & in-browser.
1. The Anatomy of an SVG Wave Path
SVG waves use the <path> element with quadratic (Q) or cubic (C) Bézier curve commands:
```xml
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" style="width: 100%; height: auto;">
<path fill="#3b82f6" fill-opacity="0.8" d="M 0,0 L 0,160 Q 360,240 720,160 T 1440,160 L 1440,0 Z"></path>
</svg>
```
- viewBox="0 0 1440 320": Sets the internal coordinate grid.
- preserveAspectRatio="none": Instructs the browser to scale the SVG to fill container dimensions without preserving aspect ratio.
2. Positioning Waves in Modern CSS Layouts
Place the wave SVG directly inside a container with zero margin or padding:
```html
<section class="hero bg-blue-600 text-white">
<h1>Launch Faster</h1>
<!-- Wave divider at bottom of hero -->
<div class="overflow-hidden leading-none">
<svg class="block w-full h-24" ...></svg>
</div>
</section>
```
Setting 'display: block' or 'leading-none' removes default inline-svg bottom whitespace gaps.
Frequently Asked Questions
Why does my SVG wave have a small 3px white gap below it?
SVG elements are inline by default, causing browsers to leave room for typographical font descenders. Add 'display: block' or 'vertical-align: bottom' to the SVG to eliminate the gap.
Can I color an SVG wave with a CSS gradient?
Yes. Define a <linearGradient id='waveGrad'> inside an SVG <defs> block and set fill='url(#waveGrad)' on the path.
Ready to use SVG Wave & Section Divider Generator?
Fast, 100% private, client-side processing. No account, no watermark, completely free.