~/css/wave-generator
CSS Wave Generator
Make a wavy edge for the top or bottom of a section: set how tall the waves are, how many there are, add up to three layered waves and pick the colour. You get an inline SVG plus the CSS that pins it to the section edge.
Section content
Using the CSS Wave Generator
Why SVG for waves
A wave is a curve, and SVG draws curves crisply at any width. The path stretches horizontally with preserveAspectRatio="none", so one small SVG covers a 320px phone and a 4K monitor without blurring or a separate image for each size.
Placing the wave
The CSS positions the SVG absolutely at the top or bottom of the section, which needs position: relative. Give the wave the colour of the next section, and the two sections appear to flow into each other instead of meeting at a hard line.
Layers for depth
Two or three waves with offset phases and lower opacity behind the main one add depth, a common look on landing pages. Keep the extra layers subtle so they read as a soft echo rather than noise.
Accessibility
The wave is decoration, so the generated SVG carries aria-hidden="true" and screen readers skip it. Keep any real content inside the section, not inside the SVG.
Frequently asked questions
Can I animate the wave?
Yes. Animate the layer with a CSS transform such as translateX on a wider SVG, or use the CSS animation generator for keyframes. Respect prefers-reduced-motion if you do.
Will the wave cause layout shift?
No. It is absolutely positioned with a fixed height, so it does not push content around as the page loads.
Can I flip the wave?
Choose Top or Bottom. The generator flips the path for you so the curve always faces into the section.