Background with gradient and undulations

Question

I wonder if it is possible to create the image effect below using CSS. Make the gradient is quiet, but I’m having trouble making the ripples.

#teste {
  width: 100%;
  height: 300px;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="teste">
    <p class="text-white">Meu Conteúdo vai aqui</p>
</div>

Answer 1

There are two ways to do it, one with Clippath 100% with CSS, and one using SVG, but SVG can be straight into HTML like I did in the example. If you want you can use Base64 tb, but I think it’s not worth it...

Example with clip-path (site for you to do your path, mine got a little rough but it’s just an example. https://bennettfeely.com/clippy/) The more points, the more fluid the curves will be, as I used few points the curves became coarse as I said.

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>

---

Example with 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>

The SVG tb wasn’t perfect, but it’s just for example! Site for you to make your SVG fig with.