CSS Wave Generator

Create CSS/SVG wave shapes for section dividers.

Waves: 3

Height: 80px

Color

Flip

SVG

<svg viewBox="0 0 100 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0,80 C8.333333333333334,0 25,0 33.333333333333336,80 C41.66666666666667,0 58.333333333333336,0 66.66666666666667,80 C75,0 91.66666666666667,0 100,80 L100,0 L0,0 Z" fill="#3b82f6" />
</svg>

CSS

.wave {
  width: 100%;
  height: 80px;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%20100%2080'%20preserveAspectRatio%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%2C80%20C8.333333333333334%2C0%2025%2C0%2033.333333333333336%2C80%20C41.66666666666667%2C0%2058.333333333333336%2C0%2066.66666666666667%2C80%20C75%2C0%2091.66666666666667%2C0%20100%2C80%20L100%2C0%20L0%2C0%20Z'%20fill%3D'%233b82f6'%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
}