.background_box
  .background.background--top
    .wave.wave--top
  .background.background--mid
    .wave.wave--mid
  .background.background--bot
    .wave.wave--bot
View Compiled
.background_box{
  position: relative;
  
  height: 100vh;
}
.background{
  position: absolute;
  width: 100%;
	overflow: hidden;
  height: 100%;
  
  background-image: linear-gradient(-134deg, #2110BA 0%, #FF05D8 100%);
	
  &--top{
    z-index: 15;
    opacity: 0.5;
  }
  &--mid{
    z-index: 10;
    opacity: 0.75;
  }
  &--bot{
    z-index: 5;
  }
}
.wave{
  position: absolute;
	left: 0;
  width: 200%;
  height: 100%;
  
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
		
	will-change: transform;
	transform-origin: center bottom;
	
	&--top{
		animation: move_wave 5s linear infinite;
		background-image: url('https://isora.me/public/codepen/wave-top.png');
		background-size: 50% 100px;
	}
	&--mid{
		animation: move_wave 10s linear infinite;
		background-image: url('https://isora.me/public/codepen/wave-mid.png');
		background-size: 50% 120px;
	}
	&--bot{
		animation: move_wave 15s linear infinite;
		background-image: url('https://isora.me/public/codepen/wave-bot.png');
		background-size: 50% 100px;
	}
}

@keyframes move_wave {
	0% {
		transform: translateX(0)  scaleY(1);
	}
	50%{
		transform: translateX(-25%)  scaleY(0.55);
	}
	100% {
		transform: translateX(-50%)  scaleY(1);
	}
}
View Compiled
// none
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.