<div class="box animate">
  <div class="inner-box"></div>
</div>
@keyframes animateGradient {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
  width: 100vw; height: 100vh;
  display: grid;
  place-items: center;
  background-color: #222;
  
  --gradient: linear-gradient(
    45deg,
    #95f7d0,
    #63b9be,
    #887dc5,
    #d478ff,
    #ff94e7,
    #fec6c0,
    #fdff94,
    #b6f9bd
  );
}

.box {
  --border-radius: 5px;
  width: 300px;
  height: 150px;
  background-color: hotpink;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius);
  background-image: var(--gradient);
}

.inner-box {
  width: 95%; height: 90%;
  background-color: black;
  border-radius: var(--border-radius);
}

.animate {
  background-size: 400% 400%;
  animation: animateGradient 5s ease infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.