<div></div>
div {
  
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-color: red;
  background-image: 
    url("https://assets.codepen.io/226833/water.jpg"), 
    linear-gradient(red, yellow, blue), 
    linear-gradient( to left, black, white);
  background-blend-mode: 
    difference, 
    overlay;
  animation-duration: 3s;
  animation-name: background-color-animation;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timin-function: ease-in-out;
  
}

@keyframes background-color-animation {
  from {
    background-color: red;
  }

  to {
    background-color: blue;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.