Tem duas formas de fazer, uma com ClipPath 100% com CSS, e outra usando SVG, mas o SVG pode ser direto dentro do HTML como eu fiz no exemplo. Se vc quiser pode usar base64 tb, mas acho que não vale a pena...
Exemplo com clip-path
(site para vc fazer seu path, o meu ficou meio grosseiro mas é só um exemplo. https://bennettfeely.com/clippy/) Quanto mais pontos, mais fluida vão ser as curvas, como eu usei poucos pontos as curvas ficaram grosseiras como falei.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
body {
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.footer {
width: 100%;
height: 100vh;
position: absolute;
bottom: 0;
left: 0;
-webkit-clip-path: polygon(41% 54%, 53% 64%, 66% 60%, 89% 59%, 100% 73%, 100% 100%, 0 100%, 0% 70%, 10% 58%, 24% 51%);
clip-path: polygon(41% 54%, 53% 64%, 66% 60%, 89% 59%, 100% 73%, 100% 100%, 0 100%, 0% 70%, 10% 58%, 24% 51%);
background-color: #ffffff;
}
<div class="footer"></div>
Exemplo com SVG.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
body {
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.footer {
width: 100%;
height:50vh;
position: absolute;
bottom: 0;
left: 0;
fill: #ffffff;
}
<div class="footer">
<svg viewBox="0 0 869 344" xmlns="http://www.w3.org/2000/svg">
<path d="M 272 0.0130308C 164.8 1.21303 46 85.1797 0 127.013L 0 342.013L 867 342.013L 867 6.51303C 779 0.013031 684.5 127.013 616.5 127.013C 548.5 127.013 406 -1.48697 272 0.0130308Z"/>
</svg>
</div>
O SVG tb não ficou perfeito, mas é só pra exemplo mesmo! Site para vc fazer seus SVG figma.com