Blog

How to Add an SVG Wave Divider Between Website Sections

· 4 min read · by the ProFigma team

How to Add an SVG Wave Divider Between Website Sections

Flat horizontal lines between sections can make a page feel like a stack of boxes. A soft wave changes that. It makes one section flow into the next and gives a plain layout some personality. The best part is that it is just a small SVG shape.

How a wave divider works

A wave divider is an SVG shape placed at the top or bottom of a section. The shape is filled with the color of the next section, so it looks as if one section naturally blends into the other.

Here is the idea in code. The SVG sits at the bottom of the first section, and its fill matches the background of the section below:

<section style="background:#0f0c1d; position:relative;">
  ...content...
  <svg viewBox="0 0 1440 200" preserveAspectRatio="none"
       style="display:block; width:100%; height:120px;">
    <path fill="#7c3aed" d="M0,100 C240,40 480,160 720,100 ..." />
  </svg>
</section>

The important attribute is preserveAspectRatio="none". It lets the wave stretch to the full width of the screen, so it looks right on a phone and on a wide monitor.

Skip drawing it by hand

Writing the path data yourself is slow. Our free SVG wave and blob generator makes the shape for you:

  1. Choose Wave and a style: smooth, sharp, steps or curve.
  2. Set the height, the number of waves and how many layers you want.
  3. Pick the wave color and the section color to preview it.
  4. Press Randomize until you like it, then copy the SVG or the CSS, or download the file.

Match the colors

The trick that makes a divider invisible is simple: the wave color must be the same as the background of the next section. If the next section has a gradient, use the color at the point where the wave touches it. Pick exact colors from your design with the image color picker or build a matching gradient in the CSS gradient generator.

Wave at the top, not the bottom

To put the wave at the top of a section, flip it vertically. In the generator, switch on Flip. In your own code, add transform: scaleY(-1) to the SVG.

Layers add depth

One wave is clean. Two or three layers, each a little more transparent than the last, create a soft layered look. Keep the transparency steps small so the result stays calm.

Blobs: the other organic shape

The same tool makes blob shapes. Blobs work well behind a photo, behind a hero image or as a decorative background. Choose Blob, set the number of points and how random the shape is, and add a two-color gradient so it does not look flat.

Tips

  • Keep waves gentle. A low height and one or two waves feel professional.
  • Use SVG, not images. It stays sharp and weighs almost nothing.
  • Don't forget mobile. Check that the wave does not get too tall on small screens.
  • Use the CSS version if you would rather set the wave as a background image.

A pure CSS alternative: clip-path

If you only need a gentle curve, you do not need an SVG at all. A single line of CSS can round the bottom of a section:

.section { clip-path: ellipse(120% 100% at 50% 0); }

This is the simplest option and it never needs a separate file. The limit is the shape: you get one smooth curve, not a repeating wave or layered colors. Use SVG when you want real waves, steps or several layers.

Make it accessible and fast

  • Add aria-hidden="true" and focusable="false" to a decorative SVG so screen readers skip it.
  • Set display: block on the SVG. Without it, a thin gap can appear under the wave because SVGs behave like inline text by default.
  • Inline the SVG if it is small. It saves a request and lets you change the color with CSS.
  • Leave out extra decimal places from the path. Two are plenty.

A gentle animation

Make the SVG twice as wide as the section and slide it slowly sideways, so the wave seems to drift. Keep it slow, around 20 to 30 seconds for one loop, and stop it for people who ask for less motion:

@media (prefers-reduced-motion: reduce) {
  .wave { animation: none; }
}

Use it with care. A moving divider is nice once on a landing page, but it can distract on a content-heavy page.

Fixing the common problems

  • A thin line appears between the wave and the next section. Overlap them by 1 pixel with a negative margin, or give the SVG the same background color as the section.
  • The wave looks squashed on a wide screen. Reduce its height or use fewer waves, because it stretches with the width.
  • The color is wrong in dark mode. Use a CSS variable for the fill so both the section and the wave change together.

Frequently asked questions

How do I make a wavy section divider in CSS?

Place an SVG wave at the edge of the section and fill it with the next section's color. Use preserveAspectRatio="none" so it stretches.

Does the wave work on mobile?

Yes. It is a scalable vector and stretches to fit any width.

Can I change the color later?

Yes. Change the fill value in the SVG, or set it with CSS if the SVG is inline.

Make yours: open the SVG wave generator.

Keep reading