<div class="bg">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>


<main>
  <h1>Large Gradient BG</h1>  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin posuere nibh non pharetra. Ut sollicitudin faucibus mauris sit amet sollicitudin. Mauris quis dictum tortor. Fusce efficitur bibendum orci, ut dignissim nibh auctor vitae. Curabitur eu augue varius nibh laoreet ultrices in a odio. Pellentesque id justo at sem hendrerit vehicula in eu nisl. Vivamus id dictum dolor. Morbi sit amet nunc sollicitudin, pretium urna non, sollicitudin ex. Donec purus erat, mollis eget arcu et, posuere cursus odio. Vestibulum placerat justo sed mi imperdiet, eget elementum ex aliquam. Nullam congue pharetra metus non feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nibh risus, faucibus nec nunc eu, convallis aliquet diam. Aenean porttitor dignissim elit non aliquet. Vivamus augue nunc, vehicula lacinia pretium non, ullamcorper nec ligula.

  <p>Curabitur a nisi in enim finibus imperdiet vel ac mauris. Nullam nisl odio, vestibulum vitae mi sit amet, ultrices egestas sapien. Proin feugiat sem vel tempus pharetra. Donec molestie porttitor urna ut varius. Ut vel quam eget purus maximus ornare. Donec tortor turpis, tristique nec felis vel, consectetur interdum turpis. Phasellus lobortis blandit elementum. Integer ultricies gravida nulla a malesuada. Donec ultrices turpis sem, sed lacinia risus semper eu. Sed lectus est, consequat sit amet vulputate sit amet, laoreet nec ex.

  <p>Ut tincidunt enim non lacus scelerisque tincidunt. Praesent ullamcorper mi semper consequat faucibus. Sed mollis tempor dolor at mollis. Morbi pharetra vulputate orci, non aliquam ipsum blandit sit amet. Sed vulputate lectus lectus. Vestibulum et gravida turpis. Nullam pulvinar nec lacus non blandit. Integer metus ante, congue eu convallis nec, interdum vitae risus. Vivamus scelerisque quam tempor purus ullamcorper pulvinar. Cras mattis dui ut sem pellentesque, sit amet eleifend mi scelerisque. Fusce mattis mollis nisi et ultrices.

  <p>Proin ultrices varius arcu et ornare. Mauris felis magna, consequat non purus ut, consequat pretium est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce porta ex nunc, et rutrum lorem elementum at. Aenean luctus, justo a ornare maximus, tellus lectus tristique velit, quis faucibus libero diam eget urna. Duis dictum posuere lectus eu ullamcorper. Nullam mi ex, porttitor ut ipsum quis, sagittis commodo nisi. Nunc molestie convallis ligula, id vestibulum sapien tempor eu. Phasellus lectus velit, finibus et augue sit amet, viverra ullamcorper risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

  <p>Aenean sodales, justo et finibus dapibus, ex augue elementum libero, in tristique ex tellus sed nisi. In et diam ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, massa ut condimentum mattis, nunc ante placerat risus, congue interdum augue tortor eget velit. Mauris euismod eu lorem vel commodo. Duis eu egestas felis. Proin nisi nibh, ultricies quis accumsan id, consectetur a orci. Duis ex mi, vestibulum a urna interdum, rhoncus congue nibh. Proin ullamcorper enim et sodales venenatis. Fusce in quam condimentum, varius lacus nec, porttitor dui. Quisque a tincidunt mi, quis vulputate quam. Maecenas sed lobortis nunc. Sed consectetur quis ex et lacinia. Proin non dolor turpis.
</main>
body {
  min-height: 100vh;
  background: linear-gradient(135deg,
    #adc8c8,
    #8eb8c2, 
    #4b8896, 
    #2c7688, 
    // #145362, 
    // #0c3b46,  
  );
  background-size: 200% 100%;
  background-attachment: fixed;
  animation: gradient 15s ease infinite;
  
}

/* For color adjustment */
body:before {
  content:'';
  width: 100%;
  height: 100%;
  background: rgba(255,255,0,.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

@keyframes gradient {
  0% {background-position: 0 0}
  50% {background-position: 100% 0}
  100% {background-position: 0 0}
}


.wave {
  background: linear-gradient(to bottom,
    rgba(255,255,255,.1),
    rgba(255,255,255,0)
  );
  width: 300%;
  height: 30vh;
  position: fixed;
  bottom: 0;
  left: -50%;
  transform: translate3d(0,0,0);
  border-radius: 300% 100% 0 0 ;
  z-index: -1;
  animation: wave 20s linear infinite;
}
.wave:nth-of-type(2) {  
  border-radius: 100% 600% 0 0 ;
}
.wave:nth-of-type(3) {  
  border-radius: 1000% 30% 0 0 ;
}

@keyframes wave {
  0% {transform: translate3d(0,0,0)}
  50% {transform: translate3d(-20%,0,0)}
  100% {transform: translate3d(0,0,0)}
}


/* Not relevant */
h1 {
  margin: 0;
}

body {
  padding: 3em;
  font-size: 1.5em;
  color: rgba(0,0,0,.8);
}
View Compiled 
/* Inspired from https://codepen.io/baarbaracrr/pen/KKovmGb */
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.