Gradient Animation CSS Box

This is a neat piece of code to add subtle motion to your sites…a gradient animation css box.

Style:

.box{
/* box styles */
position: relative;
color:#fff;
text-align:center;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:45px; 
font-weight:bold;
text-transform:uppercase;
width:300px;
margin:50px auto;
background-color:#000;
padding:40px; 
}

.box::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(100% + 12px);
height: calc(100% + 12px);
transform: translate(-6px, -6px);
background: linear-gradient(60deg,
#5ff281, #5f86f2, #a65ff2,
#f25fd0, #625f61, #f2cb5f) 0 50%;;
background-size: 300% 300%;
animation: gradient-animation 2.5s alternate infinite;
border-radius: 8px;
z-index: -1;
}
@keyframes gradient-animation{
50%{background-position: 100% 50%;}
}
body {background-color: #000;}

Body Div:

<div class="box">
Your<br />
Text<br /> 
Here
</div>