CSS Wave Divider Generator
Generate CSS wave dividers between sections with customizable wave height, color, animation, and flip orientation.
What is a CSS Wave Divider?
A CSS wave divider is a decorative element placed between website sections that creates a smooth, wavy transition instead of a straight line. Unlike flat dividers, wave dividers add visual rhythm and organic flow to page layouts, gently guiding the eye from one block of content to the next.
Wave dividers are typically created using an inline SVG embedded as a CSS background-image data URI on a pseudo-element. This approach keeps the stylesheet self-contained without requiring external files or image hosting, and the SVG scales cleanly to any viewport width.
This generator draws the selected wave as an SVG path, encodes it as a data URI, and writes the CSS for you. It supports five wave styles (Sine, Sharp, Jagged, Layered, and Curve), top or bottom placement, an adjustable height, independent wave and background colours, a horizontal flip, and an optional flowing animation.
Because the animation is driven by background-position, it is GPU-accelerated in modern browsers and stays smooth on mobile devices. Every change is injected into a live preview, so you can tune the shape in real time and then copy the finished rules into your own stylesheet.
Key Concepts
- Wave styles — Sine, Sharp, Jagged, Layered, and Curve produce different silhouettes.
- Position — anchor the wave to the bottom or the top of a section.
- Wave height — the vertical depth of the wave, adjustable from 20 to 200 pixels.
- Colours — separate wave fill and background colours, each set by picker or hex value.
- Flip — mirrors the wave horizontally when you want the crest on the other side.
- Animation speed — the loop duration, adjustable from 2 to 15 seconds.
How to Use
- Choose a wave style — Select from Sine, Sharp, Jagged, Layered, or Curve.
- Set position — Place the wave at the bottom or top of a section.
- Customize — Adjust wave height, colors, and flip orientation.
- Add animation — Enable animation to make the wave flow continuously.
- Copy the CSS — Click Copy and paste into your stylesheet.
Controls Reference
Every control in the generator and how it changes the generated CSS.
| Control | Values | Effect |
|---|---|---|
| Style | Sine, Sharp, Jagged, Layered, Curve | Chooses the SVG path that draws the wave silhouette. |
| Position | Bottom, Top | Sets the bottom: 0 or top: 0 anchor of the pseudo-element. |
| Wave height | 20–200 px | Controls the container height and the wave viewBox height. |
| Wave color | Hex colour | The SVG path fill colour, set by picker or hex field. |
| Background color | Hex colour | The background of the divider container. |
| Flip | On / Off | Mirrors the wave horizontally with an SVG transform. |
| Animate | On / Off | Adds the wave-flow keyframes and a doubled background width. |
| Speed | 2–15 s | The loop duration of the wave-flow animation. |
The built-in presets combine these controls for common looks.
| Preset | Style | Height | Colours |
|---|---|---|---|
| Default | Sine | 60 px | Blue on white |
| Ocean | Layered | 80 px | Teal on mint, animated |
| Sunset | Sharp | 50 px | Orange on cream |
| Dark | Sine (top) | 70 px | Slate on dark |
| Coral | Jagged (flipped) | 55 px | Pink on rose, animated |
| Mint | Curve | 90 px | Green on pale mint |
Worked Examples
- Default sine wave — sine at 60 px, blue on white, positioned at the bottom.
- Animated ocean — layered at 80 px, teal on mint, animated with a 6-second loop.
- Top dark wave — the Dark preset anchors a sine wave to the top and transitions out of a dark hero.
- Flipped coral — the Coral preset flips a jagged wave so the points face the opposite direction.
- Curve transition — the Mint preset uses a single curve for a soft, rounded bridging edge.
- Custom height — raising the height to 200 px produces a deep, dramatic wave on a tall banner.
Tips and Common Mistakes
- Match the background colour — set the divider background to the section colour it sits against so the wave blends seamlessly.
- Keep heights consistent — use the same wave height on adjacent dividers for a balanced rhythm across the page.
- Use the flip sparingly — alternating flips can add variety, but too many inversions look restless.
- Mind the animation speed — long loops feel calm; short loops can distract from reading, so start slow.
- Watch colour contrast — the wave should separate sections without making text hard to read near the edge.
- Copy after tuning — the CSS output updates live, so finalize the controls before copying the rules.
Common Use Cases
Wave dividers are a quick way to add personality to a page without heavy graphics. These are the layouts where they work best.
- Landing page heroes — separate a bold hero from the content below with a smooth wave.
- Marketing sections — alternate wave colours to break long scrolling pages into distinct blocks.
- Call-to-action bands — frame a CTA strip with waves above and below for a finished look.
- Footers — transition into the footer with a subtle wave instead of a hard edge.
- Blog and article templates — add an organic touch to post headers and pull-quotes.
- Theme design — generate a reusable divider class for a design system or template.
Frequently Asked Questions
How do I use the wave divider in my HTML?
Add a <div class="wave-divider"></div> element between your sections. The wave shape is created via the ::before pseudo-element.
Can I use two waves (top and bottom) on the same section?
Yes. Add two .wave-divider elements - one at the top and one at the bottom of your section.
Will the wave work responsively?
Yes. The SVG wave scales to 100% width automatically. The height remains fixed but can be adjusted with media queries at different breakpoints.
Does the animation affect performance?
The animation uses CSS background-position which is GPU-accelerated in modern browsers, making it performant even on mobile devices.
Can I change the wave colour to match my brand?
Yes. Use the wave colour picker or type a hex value into its text field, and do the same for the background colour. The preview and the generated CSS update immediately.
What do the presets do?
Presets are ready-made combinations of style, position, height, colours, flip, and animation speed. Selecting a preset fills in every control so you can start from a sensible configuration and tweak it.
Can I place a wave between any two sections?
Yes. The divider is a self-contained block, so you can drop it between any two elements. Set its background colour to match one side and the wave fill to match the other for a clean blend.
Is the generated CSS free to use?
Yes. The CSS produced by the generator is yours to use in any personal or commercial project with no attribution required.