<div id="header"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100">
  <linearGradient id="gradient">
    <stop stop-color="#632092" offset="0%"></stop>
    <stop stop-color="#13d2bf" offset="100%"></stop>
    </linearGradient>
  <path fill="url(#gradient)" d="M 0 50 Q 250 100 500 50 T 1000 50 L 1000 0 L 0 0 Z"></path>
</svg>
#header {
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to right, #632092, #13d2bf);
}

html, body {
  background-color: #0b2d41
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.