様々な色のグラデーションに変化する背景

Result

See the Pen Aurora by kachibito (@kachibito) on CodePen.

色が変化するグラデーション。filter効果を使用しています

css

div {/*基本*/
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}
div:nth-child(2) {/*2層目　色相変換*/
  box-shadow: 0 0 45vmax 45vmax magenta;
  animation: hue 10s 0s linear infinite,
    move1 19s 0s linear infinite;
}
div:nth-child(3) {/*3層目　位置調整*/
box-shadow: 0 0 45vmax 45vmax white;
 animation: hue 15s 0s linear infinite,
    move2 25s 0s linear infinite;
}
div:nth-child(4) {/*4層目　位置調整を時間差で*/
box-shadow: 0 0 45vmax 45vmax cyan;
animation: hue 20s 0s linear infinite,
    move3 15s 0s linear infinite;
  opacity: .2;
}
@keyframes hue {/*色相変換アニメーション*/
  0% {
            filter: hue-rotate(0deg);
  }
  100% {
            filter: hue-rotate(360deg);
  }
}

@keyframes move1 {/*位置調整アニメーション*/
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}

@keyframes move2 {/*位置調整アニメーションその2*/
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}

@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}

html

<h1>Aurora</h1>
<div></div>
<div></div>
<div></div>
<div></div>

via

Aurora