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>
Was this article helpful?
YesNo