<div class="block glow"></div>
body {
margin: 0;
padding: 0;
background-color: white;
}
.block {
position: relative;
margin: 10% auto 0;
border-radius: 4px;
width: 896px;
height: 200px;
background: linear-gradient(0deg, white, #fdfdfd);
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.glow::before, .glow::after {
content: '';
position: absolute;
left: 0px;
top: 0px;
border-radius: 4px;
background: linear-gradient(45deg, #e6fb04, #ff6600, #00ff66, #00ffff, #ff00ff, #ff0099, #6e0dd0, #ff3300, #099fff);
background-size: 400%;
width: calc(100% + 0px);
height: calc(100% + 0px);
z-index: -1;
animation: animate 60s linear infinite;
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.glow::after {
filter: blur(30px);
opacity: .95
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.