CSS Wave Divider Generator
Generate SVG wave section dividers as CSS background images.
Wavy section dividers
A curved or wavy divider between sections softens a page and adds visual interest that a flat edge cannot. This generator produces SVG wave dividers as CSS background images, so you can separate sections without extra markup or assets.
Because the wave is an inline SVG background, there is no file to manage and the shape and color are easy to tune. Adjust the wave and copy the CSS to place a smooth divider at the top or bottom of any section.
Copy-ready wave
The divider is an inline SVG placed at a section edge, so it scales cleanly with no extra image request. Generated in your browser.
Frequently asked questions
How is the wave added to the page?
As an inline SVG, URL-encoded into a data URI and set as the background of a .divider element, so there is no image file to host or load.
What color should the wave be?
The color of the section it flows into. Place the divider between two sections and match its fill to the next section's background so the wave looks like that section's edge.
Can I flip the wave upside down?
Yes. Add transform: scaleY(-1) to the .divider rule to flip it vertically, or scaleX(-1) to mirror it left to right.
Related tools
Practical utilities for front-end design and implementation work.