#rainbow {
    background-color: #FF0000;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgb(246, 205, 205) 100%)
    (to top, rgba(0,0,0,0) 0%, rgb(246, 205, 205) 100%);
    animation: rainbow 10s infinite;
}
#rainbow {
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

.container-rainbow {
  position: relative;
  margin: auto;
  border-radius: 50%;
  align-content: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);;
  }



@keyframes rainbow {
    0%, 100% { background-color: #FF0000; }
    16.66% { background-color: #FFFF00; }
    33.33% { background-color: #00FF00; }
    50% { background-color: #00FFFF; }
    66.66% { background-color: #0000FF; }
    83.33% { background-color: #FF00FF; }
}
.child {
  position: absolute;
  top: 30%;
  left: 30%;
  margin: -10% 0% 0% -10%; /* Half this element's height */
  border-radius: 50%;
 z-index: 10;
 animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.center {
margin: auto
}