Background with gradient and ripples

Question

Background with gradient and ripples

Navigation

#1 by (2 votes)

1

I wonder if it's possible to create the effect of the image below using CSS. Doing the gradient is quiet, but I have difficulty 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>

html css webdesign bootstrap-4

asked by anonymous 05.04.2018 / 20:46

1 answer

Remove a specific line in all files in a directory using PHP Manage connections to the database correctly using hibernate

score 2 · Accepted Answer

There are two ways to do it, one with ClipPath 100% with CSS, and another using SVG, but SVG can be straight into HTML as 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 make your path, mine was kind of rude but just an example. #

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>

SVG tb was not perfect, but it's just for example! Site for you to do your SVG figma.com