<div class="back"></div>
.back{
  width:100%;
  height:100vh;
  margin:0 auto;
  border-radius: 0rem;
  background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
  background-size: 200% 200%;/*サイズを大きくひきのばす*/
  animation: back 10s ease infinite;
}

@keyframes back{
  0%{ background-position:0% 0%; }
  25%{ background-position:25% 25%; }
  50%{ background-position:50% 50%; }
  75%{ background-position:25% 25%; }
  100%{ background-position: 0% 0%; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.