How to Make a CSS Wave (Page Divider)

Create a smooth, modern page divider with a CSS wave. Below are two easy methods, pure CSS and SVG, plus centering tips and quick customizations.

Live Preview: CSS Wave (Page Divider)

Method 1: Pure CSS with clip-path

.wave-divider {
  width: 100%;
  height: 180px;
  background: var(--wave-color, #cd5454); /* divider color (CSS variable or hex) */
  /* Bottom wave made from a polygon approximation */
  clip-path: polygon(
    0 0, 100% 0,
    100% 70%, 95% 74%, 90% 78%, 85% 74%, 80% 70%,
    75% 66%, 70% 62%, 65% 66%, 60% 70%,
    55% 74%, 50% 78%, 45% 74%, 40% 70%,
    35% 66%, 30% 62%, 25% 66%, 20% 70%,
    15% 74%, 10% 78%, 5% 74%, 0 70%
  );
}

/* Optional: center the divider block itself */
.wave-divider.is-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

Method 2: SVG Background (data URL)

.wave-divider {
  width: 100%;
  height: 180px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* SVG draws a rectangle with a wavy bottom edge.
     Color is hard-coded here (cannot use var(...) inside data URLs). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path fill='%23cd5454' d='M0 0H600V80C520 120 480 40 400 80C320 120 280 40 200 80C120 120 80 40 0 80V0Z'/></svg>");
}

/* Optional container centering */
.wave-divider.is-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

To change the color for the SVG background method, edit the hex in the SVG path’s fill attribute. If you need to style the color via CSS, either:

  • Use an inline <svg> in your HTML so you can target it with CSS, or
  • Use an SVG mask and set the color with background-color on the element.

Alternative: SVG mask so you can color with CSS

.wave-divider {
  width: 100%;
  height: 180px;
  background-color: var(--wave-color, #cd5454); /* color via CSS */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path fill='%23000' d='M0 0H600V80C520 120 480 40 400 80C320 120 280 40 200 80C120 120 80 40 0 80V0Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path fill='%23000' d='M0 0H600V80C520 120 480 40 400 80C320 120 280 40 200 80C120 120 80 40 0 80V0Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

How This Works

The clip-path method trims a rectangle into a wave by defining many points that approximate a smooth curve along the bottom edge. The element’s background color fills the visible shape, and you can adjust the Y percentages to change wave height.

The SVG method renders a precise curve using a path and sets it as a background-image. Because it scales with the element, it’s crisp at any size and easy to reuse without extra HTML. Note: CSS variables do not resolve inside a data URL used by background-image, so you must hard-code the color there or use an inline SVG or mask approach to color it via CSS.

How to Center Content Inside a CSS Wave (Page Divider)

The easiest way to center text or icons inside the wave is with Flexbox or Grid. Add one of the following to your wave’s CSS:

Method 1: Use CSS Flexbox

.wave-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff; /* optional for contrast */
}

Method 2: Use CSS Grid

.wave-divider {
  display: grid;
  place-items: center;
  color: #fff; /* optional for contrast */
}

Flip Only the Wave Shape (don’t flip the content)

Applying transform: scaleY(-1) to the divider element will flip the content too. To invert just the wave, render the wave on a pseudo-element and transform that layer:

Clip-path version using a pseudo-element

.wave-divider {
  position: relative;
  width: 100%;
  height: 180px;
  display: grid;
  place-items: center; /* keeps content centered */
  color: #fff;
  z-index: 0; /* establish stacking context */
}

.wave-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wave-color, #cd5454);
  clip-path: polygon(
    0 0, 100% 0,
    100% 70%, 95% 74%, 90% 78%, 85% 74%, 80% 70%,
    75% 66%, 70% 62%, 65% 66%, 60% 70%,
    55% 74%, 50% 78%, 45% 74%, 40% 70%,
    35% 66%, 30% 62%, 25% 66%, 20% 70%,
    15% 74%, 10% 78%, 5% 74%, 0 70%
  );
  transform: scaleY(-1);      /* flips the wave only */
  transform-origin: center;
  z-index: -1;                /* keep it behind content */
}

SVG background version using a pseudo-element

.wave-divider {
  position: relative;
  width: 100%;
  height: 180px;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 0;
}

.wave-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'><path fill='%23cd5454' d='M0 0H600V80C520 120 480 40 400 80C320 120 280 40 200 80C120 120 80 40 0 80V0Z'/></svg>");
  transform: scaleY(-1);
  transform-origin: center;
  z-index: -1;
}

When to Use Each Shape Method

Use clip-path for a lightweight, pure-CSS solution that’s easy to tweak and animate with keyframes. Use the SVG background for a perfectly smooth curve that stays crisp at any scale. If you need to control color via CSS variables, prefer the clip-path method, an inline SVG, or the mask-image technique.

Quick Customizations

  • Color: For clip-path, set background: var(--wave-color, #cd5454). For the SVG data URL background, edit the hex inside the SVG, or switch to inline SVG or the mask approach to control color via CSS.
  • Flip: Don’t apply transform: scaleY(-1) to the content container. Instead, move the wave to a pseudo-element (as shown above) and transform that layer so your content remains upright.
  • Adjust wave height: Increase/decrease the Y percentages near the bottom of the polygon (clip-path) or edit the SVG path coordinates.

Accessibility & SEO

If the divider is purely decorative, mark it with aria-hidden=”true” or ensure it doesn’t receive focus; if it conveys meaning, give nearby text a clear label describing the section change.