Svg como imagen de fondo pintando un blanco sobre el gradiente, alineado al borde inferior y con background-size: contain
para que se acomode.
#footer {
background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 1900 230%22%3E%0A %3Cpath fill%3D%22%23FFF%22 d%3D%22M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V230h1900v-21.57z%22%2F%3E%0A%3C%2Fsvg%3E'), linear-gradient(to left, #037FD5, #03c5d5);
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
min-height: 340px;
color: #fff;
}
body {
background: #fe0;
}
<body>
<div id="footer">
<h1>Curabitur sit amet dolor varius</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum porttitor ullamcorper. Ut consequat, ante nec vestibulum suscipit, velit sapien lobortis sem, sed molestie nulla metus ac ante. Proin libero orci, porta et eros ac, ullamcorper
aliquam urna. Nam suscipit neque ut ex laoreet aliquam. </p>
</div>
</body>
El svg sin urlencodear:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 230">
<path fill="#FFF" d="M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V230h1900v-21.57z"/>
</svg>
Otra opción con svg inline: el gradiente está aplicado en el svg, preserveAspectRatio
hace que se estire o se centre o cropee.
La ventaja es que el svg está en el DOM y lo podes modificar con javascript o más css.
body {
background: #fe0;
}
#footer {
min-height: 340px;
background: transparent;
position: relative;
z-index: 10;
color: #fff;
}
#footer>svg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
}
<body>
<div id="footer">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1900 230">
<linearGradient id="grad" x2="1889.01" y1="105.51" y2="105.51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#037fd5"/>
<stop offset="1" stop-color="#71c8f1"/>
</linearGradient>
<path fill="url(#grad)" d="M1900 208.43c-209.35-14.29-314.55-89.93-509.35-89.93-104.5 0-313.16 81.67-455.85 78.24-162.33-3.9-351.81-78.24-458.44-78.24C322 118.5 254.11 160.43 157 179 63.19 196.94 0 211.03 0 211.03V0h1900v208.43z"/>
</svg>
<h1>Curabitur sit amet dolor varius</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum porttitor ullamcorper. Ut consequat, ante nec vestibulum suscipit, velit sapien lobortis sem, sed molestie nulla metus ac ante. Proin libero orci, porta et eros ac, ullamcorper
aliquam urna. Nam suscipit neque ut ex laoreet aliquam. </p>
</div>
</body>
height, border y filtro de opacity
preserveAspectRatio